質問編集履歴
1
ご回答をもとにコードを修正し、実現したいことができました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -63,4 +63,51 @@
|
|
|
63
63
|
|
|
64
64
|
### 試したこと
|
|
65
65
|
|
|
66
|
-
* 他の言語のように、For文を組んでみましたが、うまくいきませんでした。
|
|
66
|
+
* 他の言語のように、For文を組んでみましたが、うまくいきませんでした。
|
|
67
|
+
|
|
68
|
+
### 【解決】うまくいったコード
|
|
69
|
+
|
|
70
|
+
```
|
|
71
|
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
72
|
+
<title>test</title>
|
|
73
|
+
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
<div id="app">
|
|
77
|
+
<input v-model="inputId">
|
|
78
|
+
<input v-model="inputName">
|
|
79
|
+
<button v-on:click="addTable">Add Table</button>
|
|
80
|
+
<ul v-for="fruit in fruits">
|
|
81
|
+
<td> {{ fruit.id }} </td>
|
|
82
|
+
<td> {{ fruit.name }} </td>
|
|
83
|
+
</ul>
|
|
84
|
+
</div>
|
|
85
|
+
|
|
86
|
+
<script>
|
|
87
|
+
var app = new Vue({
|
|
88
|
+
el: '#app',
|
|
89
|
+
data: {
|
|
90
|
+
fruits: [
|
|
91
|
+
{ id:'ID', name:'Name' },
|
|
92
|
+
{ id:'1', name:'りんご' },
|
|
93
|
+
{ id:'2', name:'ぶどう' },
|
|
94
|
+
{ id:'3', name:'すいか' }
|
|
95
|
+
]
|
|
96
|
+
},
|
|
97
|
+
methods: {
|
|
98
|
+
addTable: function () {
|
|
99
|
+
var flag = true
|
|
100
|
+
for (let index = 1; index < this.fruits.length; index++) {
|
|
101
|
+
if (this.fruits[index].name == this.inputName) {
|
|
102
|
+
flag = false
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
if (flag == true){
|
|
106
|
+
this.fruits.push({ id:this.inputId, name:this.inputName })
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
})
|
|
111
|
+
|
|
112
|
+
</script>
|
|
113
|
+
```
|