How do I submit the selected content in VUE?
I looped out 10 li tags in v-for. The text of li is different.
< ul v show = "fg.zt" >
< li v show = "I in fg.list" @ click= "liFocus" > {{I}}
Select 2 of them, and then click submit
how to submit the 2 selected text?
previously, you can get $(this). Text () from the selected li by operating dom, with jquery
be aware that Vue
is data-driven.
<template>
<div id="app">
<ul>
<li v-for="i in list" @click="liFocus(i)">{{i}}<li>
</ul>
</div>
</template>
new Vue({
el: '-sharpapp',
data: {
list: [1,2,3],
checkedList: [],
},
methods: {
liFocus(i){
console.log(i);
//
// push
if(this.checkedList.indexOf(i) === -1){
this.checkedList.push(i);
}
//
console.log(this.checkedList);
},
},
})
it is recommended to take a look at Vue
official document when you are free, and cooperate with example exercises to deepen your data-driven impression.
there are two ways to get the elements in a point:
one is the same as jquery. Jquery obtains the DOM attribute through the event object. $(this)
wraps the corresponding DOM node of the event object and uses the encapsulated method to obtain the attribute. Vue also has the event object, which is explicitly injected $event
into the event handler function, that is, liFocus ($event), obtains the DOM node e.target
contained in the native event object, and uses the native method to obtain the attribute.
second, because vue has its own template syntax, the I
variable declared in the loop can be directly used in the loop structure, which can be directly passed as a parameter into the event listener function. LiFocus (i), can access this variable inside the function and store it, so there is no need for event objects and DOM operations are omitted.
Native js textContent
fetch element
content
let lis = document.querySelectorAll('.selected') //class
let text = ''
Array.prototype.splice.call(lis).forEach(li => {
text += li.textContent.trim()
})