VUE中如何提交所选项的内容？

Question

我用v-for 循环出来个10个li标签，li的文字不同，

<ul v-show="fg.zt">
<li v-for="i in fg.list" @click="liFocus"> {{ i }}</li>
</ul>

选择其中2个，然后点击提交
怎么把选中的2个文字提交出来？

以前用jquery操作dom，可以把选中的li 获取$(this).text()

Answer 1

要明白，Vue是数据驱动。

<template>
    <div id="app">
        <ul>
            <li v-for="i in list" @click="liFocus(i)">{{i}}<li>
        </ul>
    </div>
</template>

new Vue({
    el: '#app',
    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);
        },
    },
})

建议有空多看看Vue的官方文档，配合例子练习，加深数据驱动印象。

Answer 2

要获取点中元素有两种思路：

其一是跟jquery的道理一样，jquery是通过事件对象来获取DOM属性，$(this)包装了本次事件对象相应的DOM节点，使用封装了的方法获取属性；vue也有事件对象，在事件处理函数里显式注入$event,即liFocus($event),获取原生的事件对象包含的DOM节点e.target，使用原生方法获取属性。

其二是因为vue有自己的模板语法，所以在循环结构内是可以直接使用在循环里声明的i变量，可以把它作为参数直接传入事件监听函数里liFocus(i),在函数内部可以访问这个变量再进行存储，这样就不需要事件对象了，也省去了DOM操作。

Answer 3

原生js用textContent取element内容

let lis = document.querySelectorAll('.selected') //自定义的选中class
let text = ''
Array.prototype.splice.call(lis).forEach(li => {
  text += li.textContent.trim()
})