Q&A
> オブジェクト内の各プロパティの値を検知することは可能でしょうか。
これは、まずはやってみたが、出来なかった、ということでしょうか？？
vue.jsのwatchプロパティについて、お聞きしたいことがあります。
watchプロパティでは値の変更を検知することが出来ますが、オブジェクト内の各プロパティの値を検知することは可能でしょうか。
具体的には、以下のコードのv-forで回している各「inputボックス」の"question.input"をVue側でwatchとして検知したいと考えています。
最終的にはtechrachoのように、入力された値が設定した文字数を超過した場合に処理を施すようにしたいと思っています。
こちら、良い方法がありましたら教えて頂けましたら幸いです。
html
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6</head> 7<body> 8 <div id="main_box"> 9 <div 10 v-for="(question, index) in questions" 11 :key="index" 12 v-cloak 13 > 14 <span v-cloak>{{ question.question }} = </span> 15 <div v-cloak class="text_box"> 16 <input type="text" 17 v-model="question.input" 18 > 19 </div> 20 </div> 21 </div> 22</body> 23</html>
js
1'use strict'; 2 3const questions = [ 4 { 5 question: "1 + 1", 6 answer: 2, 7 input: null, 8 result: '' 9 }, 10 { 11 question: "2 + 1", 12 answer: 4, 13 input: null, 14 result: '' 15 }, 16 { 17 question: "4 + 1", 18 answer: 5, 19 input: null, 20 result: '' 21 }, 22 { 23 question: "5 + 1", 24 answer: 6, 25 input: null, 26 result: '' 27 }, 28 { 29 question: "6 + 1", 30 answer: 7, 31 input: null, 32 result: '' 33 }, 34] 35 36new Vue({ 37 el:'#main_box', 38 data:{ 39 questions, 40 }, 41 watch:{ 42 43 } 44})
回答1件
0
watchでの記述は難しいのですが、Vue.jsにある「v-on」で代用できるのではないかと思いました。
以下の記述箇所
HTML
1<input type="text" 2 v-model="question.input" 3>
上記にv-onを追加します。
変更を検知したいタイミングによって、イベントは異なります。
例えば、、、
入力を確定したタイミングの場合、
HTML
1<input 2 type="text" 3 v-model="question.input" 4 v-on:change="hogeFunc" 5>
入力したタイミングの場合、
HTML
1<input 2 type="text" 3 v-model="question.input" 4 v-on:input="hogeFunc" 5>
上記で代用できるのではないでしょうか？
ちなみにhogeFuncは以下のように記述し、動作確認しました。
JavaScript
1methods: { 2 hogeFunc() { 3 console.log("検知"); 4 } 5}
投稿2021/01/13 05:33
総合スコア354
あなたの回答
tips
プレビュー
