如何從Vue Template獲取數據？

我有下一個HTML：如何從Vue Template獲取數據？

<div id="app"> 
    <component :is="currentView"></component> 
</div>

Vue公司代碼：

var GuestMenu = Vue.extend({ 
     template: ` 
        <input v-model="username"> 
      `}); 
Vue.component('guestmenu', GuestMenu); 

var App = new Vue ({ 
    el: '#app', 
    // template: '<usermenu></usermenu>', 
    data: 
    { 
     currentView: "guestmenu", 
     username: "" 
    } 
    })

我需要從v-model得到username。所有的例子展示瞭如何得到它的直接，但我的數據放置在模板中的問題...

http://jsfiddle.net/u9L569ku/

來源

2016-01-10 Dmitry Bubnenkov

當你說你想從V模型的用戶名，你已經這樣做了。由於v-model指令，數據對象用戶名有兩種綁定方式。 – notANerdDev

你確定嗎？你能告訴我如何輸出它的價值...... –

'this.username'會給它的價值。 – notANerdDev

我相信這是你想要達到的目標。基本上，在你的例子中有一個親子關係，但溝通不正確。您的組件中的用戶名未綁定到Vue實例的數據中的用戶名。

jsfiddle

HTML

<div id="app"> 
    <component :username.sync="username" :is="currentView"> </component> 
    {{username}} 
</div>

的JavaScript

var GuestMenu = Vue.extend({ 
    props : ['username'], 
    template: `<input v-model="username">` 
}); 

Vue.component('guestmenu', GuestMenu); 

var App = new Vue ({ 
    el: '#app', 
    data: { 
     currentView: "guestmenu", 
     username: "" 
    } 
    })

來源

2016-01-10 15:54:06 zxzak

你也可以看看這個問題。這是一個有點相關http://stackoverflow.com/questions/34697989/is-its-good-practice-to-declaration-new-component-in-template –

如何從Vue Template獲取數據？

回答

相關問題