Vueでリスト要素のプロパティを更新しようとして嵌っているのでご回答いただけたら嬉しいです。
methodsを使ってリストデータのプロパティを更新する実装ができず困っています。
以下にソースを記述します。
ソース最下部のupdateメソッドが動きません。
const app = new Vue({ el: '#app', data: { books: [ { id:1, title: "book01", price: 100 }, { id:2, title: "book02", price: 200 }, { id:3, title: "book03", price: 300 }, { id:4, title: "book04", price: 400 }, { id:5, title: "book05", price: 500 }, { id:6, title: "book06", price: 600 }, { id:7, title: "book07", price: 700 }, { id:8, title: "book08", price: 800 }, { id:9, title: "book09", price: 900 }, { id:10, title: "book10", price: 1000 } ] }, methods: { update: function() { this.$set( this.books, 0, { id:1, title: "book01新装版", price: 150} ) } } })
イベントをハンドルしている箇所は以下ソース最下部のupdateです。
<div id="app"> <ul> <li v-for="book in books" :key="book.id"> 書籍名:{{ book.title }} 値段:{{book.price}}円 <span v-if=" book.price < 500 ">10%OFF</span> </li> </ul> <br><br> <button @click="update">書籍更新</button> </div>
吐かれるエラーは以下です。
vue.js:2236 Uncaught TypeError: exp.trim is not a function at parseExpression$1 (vue.js:2236) at Vue.$set (vue.js:8512) at Vue.update (main.js:19) at HTMLButtonElement.<anonymous> (vue.js:220)
解決策をご存知の方がいましたら、ご回答いただければ嬉しいです。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー