带有css样式的Vue v-model? [英] Vue v-model with css styling?
问题描述
这个问题很难解释，所以我想我会从展示我所拥有的开始:
Vue.component('list-component', {数据:函数(){返回 {新任务: ""，任务列表: []，新子任务:"",子任务列表:[]，};},模板:''+''+'<input v-if="showInput" class="input typeahead" type="text" placeholder="mainInput" v-model="newTask" v-on:keyup.enter="addTask">'+'</节>'+'<details v-for="task in taskList" v-bind:key="task.text" class="sub-list-item">'+'<summary>{{ task.text }}<button v-on:click="removeTask(task)">X</button>'+ '</摘要>'+'<input class="subInput" type="text" placeholder="subInput" v-model="newSubTask" v-on:keyup.enter="addSubTask">'+'</详细信息>'+'</div>',计算:{显示输入:函数(){返回 !this.taskList.length},},方法: {//添加任务//添加任务:函数(){var task = this.newTask.trim();如果(任务){this.taskList.push({文字:任务});this.newTask = "";}},添加子任务:函数(){var task = this.newSubTask.trim();如果(任务){this.subTaskList.push({文字:任务});this.newSubTask = "";this.$emit('已添加任务', 任务);}},//删除任务//移除任务:功能(任务){var index = this.taskList.indexOf(task);this.taskList.splice(index, 1);this.$emit('removedtask', task);},},});新的 Vue({el: "#madplan",数据: {新任务: ""，任务列表: []，新子任务:"",子任务列表:[]，},方法: {确认添加任务:功能(任务){this.$data.subTaskList.push({ text: task })},确认移除任务:功能(任务){this.$data.subTaskList = this.$data.subTaskList.filter(it => it.text != task.text)},removeSubTask:函数(任务){var index = this.subTaskList.indexOf(task);this.subTaskList.splice(index, 1);this.$emit('removedtask', task);},}});.first {背景颜色:红色；}.第二 {背景颜色:蓝色；}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script src="https://unpkg.com/vue/dist/vue.js"></script><section id="madplan" class="section-wrapper"><section class="check-list"><列表组件类='第一'v-on: addedtask='acknowledgeAddedTask'v-on:removedtask='acknowledgeRemovedTask'></list-component><列表组件类=第二"v-on: addedtask='acknowledgeAddedTask'v-on:removedtask='acknowledgeRemovedTask'></list-component></节><ul id="indkøbseddel"><h2>Indkøbsseddel</h2><li v-for="subTaskList 中的任务" v-bind:key="task.text" class="list-item">{{ task.text }}<button v-on:click="removeSubTask(任务)">X</button></li></section>
因此，如果您尝试运行该应用程序，并将一些文本添加到 mainInput 字段中，使用类 .first - 这个新细节也会获得类 .first.但是，当您打开详细信息并在新字段 (subInput) 中进行输入时，它会将此输入发布到 ul id="indkøbseddel" 中的 li - 但现在类/样式消失了.
我可以以某种方式将其转移到 li 吗?我想要完成的是 li 上的不同颜色，它是从第一个输入(列表组件)或第二个输入添加的.
难以解释，所以请随时提出问题.不必这样做，我只需要能够根据输入字段区分添加的 li.
提前致谢！
JSFiddle:https://jsfiddle.net/ucL2pv6f/
一旦你意识到，将 component 的类传递给它的 parent 的困难变得更容易解决表达式 v-on: addedtask='acknowledgeAddedTask' 等价于 v-on: addedtask='task =>确认添加任务(任务)'
然后您可以在此基础上更改您的组件声明，使 class='first' v-on: addedtask='acknowledgeAddedTask 变为 class='first' v-on: addedtask='任务 =>acknowledgeAddedTask("first", task)' 对第二个组件也是如此.
然后您需要更改为 acknowledgeAddedTask 方法以容纳新参数，以便您以
acknowledgeAddedTask: function(cls, task) {this.$data.subTaskList.push({文字:任务，类:列表项"+ cls})}最后，在 #madplan 的 li s 上将 class 属性更改为 :class=task.class 以便每个列表项都有添加该项目时设置的正确类.
参见更新的小提琴
It is hard to explain this problem, so i think i will start by showing what i have:
Vue.component('list-component', {
data: function() {
return {
newTask: "",
taskList: [],
newSubTask: "",
subTaskList: [],
};
},
template:
'<div>' +
'<section class="prefetch">' +
'<input v-if="showInput" class="input typeahead" type="text" placeholder="mainInput" v-model="newTask" v-on:keyup.enter="addTask">' +
'</section>' +
'<details v-for="task in taskList" v-bind:key="task.text" class="sub-list-item">' +
'<summary>{{ task.text }}<button v-on:click="removeTask(task)">X</button>' + '</summary>' +
'<input class="subInput" type="text" placeholder="subInput" v-model="newSubTask" v-on:keyup.enter="addSubTask">' +
'</details>' +
'</div>',
computed: {
showInput: function() {
return !this.taskList.length
},
},
methods: {
//addTasks
//
addTask: function() {
var task = this.newTask.trim();
if (task) {
this.taskList.push({
text: task
});
this.newTask = "";
}
},
addSubTask: function() {
var task = this.newSubTask.trim();
if (task) {
this.subTaskList.push({
text: task
});
this.newSubTask = "";
this.$emit('addedtask', task);
}
},
//removeTasks
//
removeTask: function(task) {
var index = this.taskList.indexOf(task);
this.taskList.splice(index, 1);
this.$emit('removedtask', task);
},
},
});
new Vue({
el: "#madplan",
data: {
newTask: "",
taskList: [],
newSubTask: "",
subTaskList: [],
},
methods: {
acknowledgeAddedTask: function(task) {
this.$data.subTaskList.push({ text: task })
},
acknowledgeRemovedTask: function(task) {
this.$data.subTaskList = this.$data.subTaskList.filter(it => it.text != task.text)
},
removeSubTask: function(task) {
var index = this.subTaskList.indexOf(task);
this.subTaskList.splice(index, 1);
this.$emit('removedtask', task);
},
}
});
.first {
background-color: red;
}
.second {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<section id="madplan" class="section-wrapper">
<section class="check-list">
<list-component
class='first'
v-on:addedtask='acknowledgeAddedTask'
v-on:removedtask='acknowledgeRemovedTask'
></list-component>
<list-component
class='second'
v-on:addedtask='acknowledgeAddedTask'
v-on:removedtask='acknowledgeRemovedTask'
></list-component>
</section>
<ul id="indkøbseddel">
<h2>Indkøbsseddel</h2>
<li v-for="task in subTaskList" v-bind:key="task.text" class="list-item">{{ task.text }}<button v-on:click="removeSubTask(task)">X</button></li>
</ul>
</section>
So, if you try to run through the app, and add some text to the mainInput field, with the class .first - this new details get the class .first aswell. But when you open the details and make an input into the new field (subInput), it posts this input to the li in ul id="indkøbseddel" - but now the class / styling is gone.
Can i somehow transfer this to the li? What i am trying to accomplish is different colors on the li, wether it has been added from the first input (list-component) or the second.
Hard to explain, so feel free to ask questions. It doesnt have to be done this way, i just need to be able to differentiate between the li's added depending on which input field.
Thanks in advance!
JSFiddle: https://jsfiddle.net/ucL2pv6f/
The difficulty in passing the class of the component to its parent becomes easier to approach once you realize that the expression v-on:addedtask='acknowledgeAddedTask' is equivalent to v-on:addedtask='task => acknowledgeAddedTask(task)'
You can then build upon this to change your component declaration such that class='first' v-on:addedtask='acknowledgeAddedTask becomes class='first' v-on:addedtask='task => acknowledgeAddedTask("first", task)' and like wise for the second component.
Then you need to change to acknowledgeAddedTask method to accommodate the new parameter so that you end up with
acknowledgeAddedTask: function(cls, task) {
this.$data.subTaskList.push({
text: task,
class: "list-item " + cls
})
}
Finally, on the lis of #madplan change the class attribute to :class=task.class so that each list item has the right class as set while adding that item.
See updated fiddle
这篇关于带有css样式的Vue v-model?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
