vue.js　HTML要素を書き換えた時にv-modelが働かない

innerHTMLでHTML要素を書き換えた時に、vueとバインドしている部分（v-model）が描画できません。

html
1<body>
2  <div id="app">
3    <div>
4      <input v-model="colors[0].name">
5    </div>
6  </div>
7
8<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
9<script>
10
11new Vue({
12  el: '#app',
13  data: {
14    colors: [{name:"red"},{name:"green"},{name:"blue"}]
15  },
16})
17</script>
18</body>
19```
20
21これだと、問題なくテキストエリア部分には"red"と書かれます。
22
23この3〜5行目をinnerHTMLを使って書き換えようと思い、以下のコードを書きましたが、
24v-modelがうまく働いていないのか、テキストエリア内は空欄のままです。
25
26``````html
27<body>
28  <div id="app">
29-    <div>
30-      <input v-model="colors[0].name">
31-    </div>
32+    <div id="insert_el">
33+      ここが置き換わる
34+    </div>
35
36+    <button onclick="insertHtml()">置き換え</button>
37  </div>
38
39<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
40<script>
41
42+function insertHtml(){
43+  const target=document.getElementById("insert_el")
44+  target.innerHTML='<input v-model="colors[0].name">'  //ここがうまく行っていない部分
45+}
46
47new Vue({
48  el: '#app',
49  data: {
50    colors: [{name:"red"},{name:"green"},{name:"blue"}]
51  },
52})
53</script>
54</body>

HTMLを書き換えた時に、vueのディレクティブを反映させる方法はあるのでしょうか。

よろしくお願いします。

行動規範の内容に同意します

回答2件

ベストアンサー

Vueを利用して制御するならinnerHTMLで書き換えないのが望ましいですし書き換えたら正常動作しないと思います。

結局

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5</head>
6<body>
7  <div id="app">
8    <div v-if="clickFlg">
9      <input v-model="colors[0].name">
10    </div>
11    <button v-on:click="clickFlg = true">{{ colors[0].name }}</button>
12  </div>
13
14<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
15<script>
16new Vue({
17  el: '#app',
18  data: {
19    colors: [
20      {name:"red"},
21      {name:"green"},
22      {name:"blue"}
23    ],
24    clickFlg: false,
25  }
26});
27</script>
28</table>
29</body>
30</html>

こういうことをしたいのかな

投稿2020/05/23 09:05

rururu3

総合スコア5545

Yuta4551

2020/05/23 12:11

アドバイスありがとうございます。実際の画面ではユーザーの状態によっては回答しなくても良い欄が多いので、見た目を良くするために「回答する」のボタンを押したときだけテキストエリアを表示させたいと思っていました。ボタンを押した時に書き換えて出現させるのではなく、v-ifを使って隠しておいたHTMLを条件によって出現させる方法をとります。

行動規範の内容に同意します