質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Q&A

解決済

1回答

424閲覧

Vueでリストの要素内のプロパティを更新できない

tmykndr

総合スコア74

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

0グッド

0クリップ

投稿2018/10/06 16:32

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)

解決策をご存知の方がいましたら、ご回答いただければ嬉しいです。
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

s8_chu

2018/10/06 16:42 編集

codepenにて、質問文のコードの動作確認をしましたが、特にエラーが発生していないように見えます( https://codepen.io/anon/pen/LgRdpr )。質問者さんが記述したコードについて、もう少し詳しく教えていただけませんか?
tmykndr

2018/10/06 17:37

s8_chuさん ご回答いただきありがとうございます!codepenを確認しましたところ問題なく動いたので、自分のソースと見比べましたらVue.jsのバージョン違いが原因でした。codepenがすごくヒントになりました!ありがとうございます!!
guest

回答1

0

自己解決

解決しましたので以下に原因を記載いたします。
原因は使用しているVue.jsのバージョンでした。
エラーが出る環境はVue.js v1.0.28でした。
Vue.js v2.5.17にて問題なく動作することが確認できました。

投稿2018/10/06 17:40

tmykndr

総合スコア74

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問