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

Javascript
Sep.16,2021

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()
})

Previous: Convert objects in a javascript multidimensional array to an array

Next: Under what circumstances can class in ES6 not declare constructor?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu