VueJS嵌套數據模型

我對VueJS相對較新，想知道如何在其他組件中嵌套/引用組件的屬性，以便V模型綁定實際上可以更新它們。VueJS嵌套數據模型

爲了說明，我正在嘗試做這樣的事情。

模板：

<table> 
    <tr v-for="field in myFields"> 
     <td class="label">{{field.label}}</td> 
     <td class="user-control"> 
      <input v-model="field.model"> 
     </td> 
    </tr> 
</table>

組件：

export default { 
    data() { 
     return { 
      myFields: [ 
       { 
        "label": "label", 
        "model": this.propertyOne 
       }, 
       { 
        "label": "label", 
        "model": this.propertyTwo 
       } 
      ], 
      propertyOne: "", 
      propertyTwo: "" 
     } 
    } 
}

在這個例子中，我期待的模板首先呈現在輸入propertyOne和propertyTwo值（例如空字符串），和那麼當我通過輸入改變它們時，就會更新這些值，就像通常用v模型做的那樣。

第一個作品，這意味着如果我將propertyOne設置爲「Foo」，它將最初用作輸入值，但後續更改仍不會更新屬性。我很喜歡這個工作，這樣我就可以利用v-for hook的強大功能，而不必在超過10個字段的情況下寫下大量的靜態模板。

來源

2017-02-07 Brendan B.

當你這樣做："model": this.propertyTwo這並不能確保所有後續更改propertyTwo將反映在model。要實現這一點，您可以選擇的選項很少。

您可以使用watcher，所以每當propertyTwo會改變，你可以執行一段代碼，就像下面：

watch: { 
    // whenever propertyTwo changes, this function will run 
    propertyTwo: function (newProp) { 
    this.myFields[1].model = newProp 
    } 
},

您還可以使用Computed-Properties或method，這將是反應性的，如果任何相關的數據的變化，他們會執行。

來源

2017-02-08 03:00:01 Saurabh

感謝您的回覆。我遇到的問題正是這樣 - 因爲propertyTwo通過對象的「model」屬性使用v-model指令綁定到輸入，所以在輸入值中所做的更改不會觸發propertyTwo上的觀察器。我還沒有嘗試過計算屬性，但我確信它們是單向綁定，所以它也不能解決問題，但也許我錯了。 –

@BrendanB。如果你在v-model中使用'propertyTwo'，它應該觸發觀察者，你可以添加代碼還是創建一個小提琴？ – Saurabh

你可以在最初的帖子中看到我想要達到的目標。我想在v-model指令中使用'field.model'，而不是'propertyTwo'，這樣我就可以使用v-for指令來遍歷數據。如果我要在模板中使用'propertyTwo'，那麼v-for就沒用了，因爲我需要在模板中手動聲明屬性綁定，不是嗎？ –

VueJS嵌套數據模型

回答

相關問題