Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/vue.js/6.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Loops vuejs如何从循环中生成的元素中检索值_Loops_Vue.js_Datatable - Fatal编程技术网

Loops vuejs如何从循环中生成的元素中检索值

Loops vuejs如何从循环中生成的元素中检索值,loops,vue.js,datatable,Loops,Vue.js,Datatable,因此,我正在生成一个表,其中包含一个复选框和一个来自项目数组的文本字段,就像一个问卷,其中的问题来自数据库 现在,如何以良好的vue方式检索复选框是否已选中以及是否有任何文本可能输入到文本字段 我注意到,通过在文本字段/复选框上添加ref,它们变成了一个vue组件数组,可以在javascript中迭代。但我还没有弄清楚如何正确地检索这些值 我的意思是,在javascript中总是有很好的get元素by id,但感觉应该有一种更奇特的方式..更多的vue-ish <table ref="qu

因此,我正在生成一个表,其中包含一个复选框和一个来自项目数组的文本字段,就像一个问卷,其中的问题来自数据库

现在,如何以良好的vue方式检索复选框是否已选中以及是否有任何文本可能输入到文本字段

我注意到,通过在文本字段/复选框上添加ref,它们变成了一个vue组件数组,可以在javascript中迭代。但我还没有弄清楚如何正确地检索这些值

我的意思是,在javascript中总是有很好的get元素by id,但感觉应该有一种更奇特的方式..更多的vue-ish

<table ref="questionnaire">
        <tr
          :id="item.questionId"
          row
          wrap
          v-for="(item, index) in questions"
          :key="item.questionId"
          :ref="'row_' + item.questionId"
        >
          <td>
            <label>{{item.name}}</label>
          </td>
          <td>    
            <v-checkbox ref="cbQ" value="value"></v-checkbox>
          </td>
          <td>
            <v-text-field label="Answer" ref="tbQ"></v-text-field>
          </td>
        </tr>
      </table>

您可以在服务器端准备问题数组,以接受选中值和文本答案,然后使用v-model将每个复选框和文本字段绑定到问题,如:

<table ref="questionnaire">
    <tr
          :id="item.questionId"
          row
          wrap
          v-for="(item, index) in questions"
          :key="item.questionId"
          :ref="'row_' + item.questionId"
    >
        <td>
            <label>{{item.name}}</label>
        </td>
        <td>    
            <v-checkbox ref="cbQ" v-model="item.checked"></v-checkbox>
        </td>
        <td>
            <v-text-field label="Answer" ref="tbQ" v-model="item.answer"></v-text-field>
        </td>
    </tr>
</table>
但在此之前,您应该在问题上映射checked和answer属性,这样v-model就已经有了要绑定的上述属性


最后,您将得到一系列问题,每个问题的答案都绑定在每个问题中。

您可以创建传递复选框id、问题id和输入值的函数预期输出是什么?所有选中复选框的数组,带有各自的值/文本或单个问题项中的所有内容?@YomS。我想基于复选框/文本字段的值在javascript中创建一个对象数组:像一个数组包含每个答案一样:var-answer={QuestionId:row.getAttributequestionid,answer:cb.getAttributearia-checked,answer:tb.value}@下面TobyFieldgroove Davide的回答应该为您指明了正确的方向。问题的来源可能会动态变化,我无法控制,因此问题的数量可能随时发生变化。我不太明白您提出的解决方案是否支持这种情况?除非我误解了,否则这个解决方案要求我知道问题的数量…=它知道!你不需要知道问题的数量就可以反复讨论它。您只需要在之前的each/foreach循环中添加属性,或者在服务器端添加任何您想要的属性,这样vue就不会将v-model绑定到未定义的道具。