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

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()
})
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1eae99c-21eb.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1eae99c-21eb.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?