vue.js 赋值都是双向绑定,如何只赋值但是不双向绑定 ?

Question

代码:

<div id="vue">
    {{b.id}},{{b.name}}
    <input type="text" v-model="b.id">
    <input type="text" v-model="b.name">
    <button v-on:click="update1()">修改1</button>
    <button v-on:click="update2()">修改2</button>
    <button v-on:click="back()">返回</button>
</div>

<script src="https://cdn.bootcss.com/vue/1.0.28/vue.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>


<script>

    var a = {
        id: '1',
        name: 'name1'
    };

    var c = {
        id: '2',
        name: 'name2'
    };
    var v = new Vue({
        el: '#vue',
        data: {
            b: '',
            liList: []
        },
        methods: {
            update1: function () {
                this.b = a;
            },
            update2: function () {
                this.b = c
            },
            back: function () {
                this.b = '';
            }
        }
    });

</script>

第一步: 点击修改1

方法update1中把 a赋值给vue的this.b属性,赋值过后a对象被添加了get/set方法,
在input的中对属性this.b进行了双向绑定,修改input的值id修改为3,name修改为name3
进行第二步点击返回会把this.b = "" ,但是其实a的值已经被改变了,变成了id=3,name=name3.
所以再次点击修改1按钮,input的值等于被修改过后的值(即使3和name3)

我只想单纯的把a的值赋被ths.b,不管this.b如何改变,a都保持最原始的数据(id=1,name=name1), a对象保持不变, 该怎么做 ?

就是有没有什么方式能够让 a 的值赋值给 this.b 过后 , a 对象不发生任何改变 ?

图片可以看出: 第一次a 只是单纯的对象 ,但是执行 this.b = a 过后, a 被添加了 get和set 导致input修改会把a的值改变

找到方法了, 把input的 v-model 修改为 :vlaue, 只进行赋值,再用reset()清空表单即可

Answer 1

想回答来着，看到题主自己解决了

v-model 改为 :value 即可

===========================================

vuejs官方文档有说明：使用自定义事件的表单输入组件

<input v-model="something">

这不过是以下示例的语法糖：

<input v-bind:value="something" v-on:input="something = $event.target.value">

Answer 2

双向绑定只在模板里起效果吧

Answer 3

b 不会也等于 3

Answer 4

把代码放到codepen上重现一下？

Answer 5

我有点疑问...a和c是对象，b定义的是字符串？这之间确定可以转换赋值？