vuejs, das v-model derective kann die json

Question

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

binden Kann ich den Weg in HTML verwenden?

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

treffe ich eine Störung auf diese Weise die Konsole

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

Answer 1

Versuchen Sie, diese

Html mit

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

SCRIPT

Answer 2

Sicher können Sie, das Snippet mit der Stütze user.name von Code geändert und den Eingabetext durch Zwei-Wege-Datenbindungsfunktionalität aktualisieren.

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>