VueJs：如何編輯數組項目

簡單的Todo應用程序。請原諒我的無知提出一個相當基本的問題。VueJs：如何編輯數組項目

但是，你將如何去和陣列上編輯某個項目？

通常我會嘗試我輸入的值綁定到一個新的屬性我的數據對象，然後在此新的屬性分配給舊財產上點擊throuch Vue公司的雙向數據綁定。

嗯，我使用V-重複指令，它通過我的數據數組循環，但我不能使用V型指令以使用數據綁定雙向的，因爲如果我這樣做，屬性的值會被破壞。（在這裏看到：http://jsfiddle.net/doL46etq/2/）

現在我不知道，我怎麼會去更新我的任務數組：

我的想法是，通過我對點擊的方法來傳遞VueObject（本），然後定義指數上我的事件處理程序，然後更新任務陣列，使用索引，就像這樣：

HTML：

<input v-el="editInputField" type="text" value="{{ task.body }}" v-on="keyup: doneEdit(this) | key 'enter'"/> 

<button v-on="click: editTask(this)"> 
    Edit 
</button>

JS：

methods: { 
    editTask: function (task) { 
     var taskIndex = this.tasks.indexOf(task.task); 

     this.tasks[taskIndex] = { 
      'body': document.querySelector('input').value, 
      'completed': false 
     }; 

     console.log(task.task.body); 
    }, 
}

這是我撥弄一下：

http://jsfiddle.net/doL46etq/3/

但數據對象完全不更新，我不知道我怎麼會去了解它，並對其進行更新。

什麼是編輯陣列中的一個元素的最佳方式，使用Vue的？

編輯：一個簡單的方法，只是刪除元素，並使用push方法將新添加到數組中，但我真的只想更新元素，因爲我想保持數據對象同步與我的後端。

來源

2015-08-09 LoveAndHappiness

其實可以找到更新的陣列的最簡單方法項目，是雙向綁定任務主體與v-型號指令。

例子：

http://jsfiddle.net/z7960up7/2/

<div id="demo"> 
    {{ message }} 

    <div class="edit"> 
     <input type="text" v-model="message">   
     <button v-on="click: editMessage">Edit</button> 
    </div>   
    <pre>{{ $data | json }}</pre> 
</div>

，只要你出模糊輸入框或編輯按鈕被擊中觸發事件。

還通過使用v級指令隱藏輸入字段與CSS。

來源

2015-09-17 09:57:22 LoveAndHappiness

答案很簡單：在擴展構造函數中使用的組件，然後在HTML索引傳遞給該組件爲屬性，並使用計算性能來回鏈接到您的數據。

但是不要滿足於簡短的回答。這裏是一個長：

情況：我用你的JSFiddle作爲基礎這個答案。

在HTML

您有：

<td>{{ task.body }}</td> 
       <td> 
        <div> 
         <input v-el="editInputField" type="text" value="{{ task.body }}" v-on="keyup: doneEdit(this) | key 'enter'" v-model="newEdit"/> 
        </div> 
       </td> 
       <td> 
        <button v-on="click: editTask(this)" class="mdl-button mdl-js-button mdl-button--icon"> <i class="material-icons">create</i> 

        </button> 
       </td>

我們希望將這段代碼與組件。使用這個組件可以讓我們確定我們正在處理的索引/行在你的數據集中。

<td v-component="listitem" index="{{$index}}"></td>

下一步：定義組件。

爲了不使我們的雲實例與組件，我們將創建VUE對象單獨的構造函數，所以我們可以將新元素分配給我們的新對象。

這是使用擴展完成的。

window.newVue = Vue.extend({ 
components: 
{ 
    'listitem': { 

     props: ['index'], 

     computed: { 
     // both get and set 
     body: { 
      get: function() { 

      return this.$parent.tasks[this.index].body; 
      }, 
      set: function (v) { 
      this.$parent.tasks[this.index].body = v 
      } 
     } 
     }, 
     template: '<td>{{ body }}</td><td><div><input type="text" v-model="body" value="{{ body }}"/></div></td><td></td>', 
    } 
}

}）;

由於我們無法使用擴展來正確定義數據，因此我們假設寫入組件時數據已經存在。

第3步：定義實際數據：現在我們不使用Vue作爲我們的對象構造函數，而是使用我們新創建的實例化器。

new newVue({ 
el: '#todoapp', 

data: { 
    tasks: [{ 
     'body': 'Eat breakfast', 
     'completed': false 
    }, { 
     'body': 'Drink milk', 
     'completed': false 
    }, { 
     'body': 'Go to the store', 
     'completed': false 
    }], 

    newTask: '', 
},

}）;

就是這樣！

如果你不能跟着發生了什麼：這裏是Fiddle!

PS：關於這些代碼的更多信息可以在vuejs.org

來源

2015-08-09 02:33:11 Sangun

謝謝Sangun。雖然我需要一些時間才能解決你的問題，因爲我還沒有研究vue組件。雖然我想知道，如果你能解釋一下，編輯/更新是如何完成的，我想不需要使用組件：https：//github.com/tastejs/todomvc/blob/gh-pages/examples/vue/ js/app.js – LoveAndHappiness

另外，什麼時候在jsfiddle中啓動Ajax請求？ – LoveAndHappiness

這取決於您想要如何處理Ajax請求。如果您希望更新數據庫中的信息，那麼從組件上啓動Set組件將是最好的（但是，請記住，只要單個字符發生更改就會發出請求，因此您可能需要延遲並緩衝所有的變化！）如果你想更新數據，我會建議添加一個新的屬性，而不是定義數據。這將允許您通過屬性編輯值。這意味着如果您使用v-repeat項目，則可以使用{{item.property}}更新變量。 – Sangun

VueJs：如何編輯數組項目

回答

相關問題