我的代碼運行良好，但我仍然無法找出為什么我會收到此錯誤訊息，我查了一下，似乎我丟失了。
我遇到的另一個問題是，當您單擊添加按鈕以添加提示卡（一個問題）時，提示卡上的選擇選項不顯示“選擇顏色”選項，它只顯示沒有文本的選擇
new Vue({
el: "#demo",
data() {
return {
que: '',
queS: [],
inputCls: 'inputbox',
bgColour: 'white',
classes: ['Select Color', 'Blue', 'Red', 'Green','Orange','Gray','Magenta','Cyan'
],
};
},
watch: {
que(value) {
if(value.length > 2) {
this.showIcon = true;
}
else {
this.showIcon = false;
}
}
},
methods: {
addqueS() {
this.inputCls = 'inputbox';
this.queS.unshift(
{
task: this.que,
completed: false
}
);
this.que = '';
setTimeout(() => {
}, 1000);
},
deleteque(index) {
this.queS.splice(index, 1);
},
},
})@import url('https://fonts.googleapis.com/css?family=Poppins');
a {
text-decoration: none;
}
.pol, .section {
padding: 1em;
position: relative;
}
.container {
width: 400px;
margin: 40px auto;
}
.container h1 {
font-size: 2em;
text-align: center;
text-transform: uppercase;
padding: 1em;
}
.pol input {
flex: 1;
padding: 0 10px;
width: 90%;
height: 30px;
outline: none;
border-radius: 5px;
border: 1px solid #00A2DF;
}
.pol .addBtn {
border-radius: 10%;
overflow: hidden;
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
}
.pol.addBtn i {
flex: 40px;
height: 40px;
text-align: center;
line-height: 40px;
color: #FFF;
font-size: 1.5em;
}
.inputbox {
transform: scaleX(0);
transform-origin: right center;
transition: all .2s ease-out;
opacity: 0;
}
.extend {
transform: scaleX(1);
opacity: 1;
}
.queS {
font-family: sans-serif;
}
.queS li {
margin: 0 0 10px 0;
padding: 10px;
border: 1px solid silver;
display: flex;
justify-content: space-between;
}
.Blue {
background: blue;
}
.Red {
background: red;
}
.Green {
background: green;
}
.Orange {
background: orange;
}
.Gray {
background: gray;
}
.Magenta {
background: magenta;
}
.Cyan {
background: cyan;
}
/* Add task transition */
.list-enter-active, .list-leave-active {
transition: all 1s;
}
.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
opacity: 0;
transform: translateY(-20px);
}
.list-move {
transition: transform .2s;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<div class="container" id="demo">
<h1>CueCards</h1>
<div class="pol">
<input type="text" v-model="que" :class="inputCls" autofocus>
<span class="addBtn">
<button @click="inputCls='inputbox extend'"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full"
v-if="!showIcon">Add Cue</button>
<button @click="addqueS"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full"
v-else>Add</button>
</span>
</div>
<div class="section">
<ul class="queS" v-if="queS.length > 0">
<transition-group name="list">
<li :class="item.bgColour" v-for="(item, index) in queS" :key="index">
<span>{{ item.task }}</span>
<span>
<button @click="deleteque(index)"
class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full">Delete</button>
<select class="bg-gray-500" v-model="item.bgColour">
<option v-for="myClass in classes" :value="myClass">{{ myClass }}
</option>
</select>
</span>
</li>
</transition-group>
</ul>
<h3 v-else>no CueCards to be shown.</h3>
</div>
</div>uj5u.com熱心網友回復：
在此標簽中添加關鍵道具
<option v-for="myClass in classes" :value="myClass">{{ myClass }}
</option>
uj5u.com熱心網友回復：
似乎這里缺少關鍵道具
<option v-for="myClass in classes" :value="myClass">{{ myClass }}
</option>
uj5u.com熱心網友回復：
您有另一個 v-for 指令，但您沒有定義密鑰
<option v-for="myClass in classes" :value="myClass">{{ myClass }}</option>
應該是這樣的
<option v-for="( myClass, i ) in classes" :key="i" :value="myClass">{{ myClass }}</option>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/432534.html
標籤：javascript 反应 拉拉维尔 Vue.js