vuejs，v-model derective可以綁定json

Question

var data=new Vue({ 
     el:"body", 
     data:{ 
     user:{ 
     name:"tom", 
     nickname:"tom1" 
     } 
     } 
     }); 

我可以在html中使用這種方式嗎？

<input type="text" v-model="user.name"/> 
<input type="text" v-model="user.nickname"/> 

我遇到這樣的故障，控制檯

vue.min.js:6 TypeError: Cannot read property 'name' of undefined(…) 

Answer 1

嘗試使用此

的Html

<div id="editor"> 
     <input type="text" v-model="user.name"/> 
    <input type="text" v-model="user.nickname"/> 
    </div> 

SCRIPT

new Vue({ 
    el: '#editor', 
    data: { 
    user:{ 
     name:"tom", 
     nickname:"tom1" 
     } 
    } 
}) 

Answer 2

當然可以，請查看代碼更改prop user.name的代碼段，並通過雙向數據綁定功能更新輸入文本。

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
     user:{ 
 
      name:"tom", 
 
      nickname:"tom1" 
 
      } 
 
    }, 
 
    methods: { 
 
    \t onClick() { 
 
     \t this.user.name = 'Tomas' 
 
     \t console.log(this.user.name) 
 
     } 
 
    } 
 
})

<script src="https://npmcdn.com/vue/dist/vue.js"></script> 
 

 
<div id="app"> 
 
    <div id="editor"> 
 
     <input type="text" v-model="user.name"/> 
 
    <input type="text" v-model="user.nickname"/> 
 
    </div> 
 
    <button v-on:click="onClick">Change name by code</button> 
 
</div>