Question

我正在研究一个vuejs可重复组件，该组件将允许用户进行几项操作-输入一个问题，然后从下拉列表中选择答案类型。问题是基于类型的，如果有多个选择，则需要显示选择数量的框，以便它可以更新数组。我不知道如何或在何处添加此内容。我还需要使这些变量（f1和f2动态），以便可以在其他时间重用。因此，如果它是单行，则选择f1；如果是单行，则选择f2。有人请提供指导

Vue.component('my-input', {
  template: '<input v-attr="name: name" v-model="value" type="text">' + '<select>' + '<option value="type1">Multiple Choice</option>' + '<option value="type2">single line</option>' + '<option value="type3">multi-line</option>' + '</select><br>'+'<br>'+'</br>',
  data() {
    return {
      value: '',
      brand: 'multiple-choice',
      options: ['option a, option b'] };

  },
  props: ['name'] });


new Vue({
  el: '#app',
  data: {
      message:'',
    inputs: [{ type: 'my-input' }]
 },
 mounted: function () {
    this.getAllPages();
},
   methods: {
    addInput() {
      this.inputs.push({ type: 'my-input' });
    },
    getAllPages: function () {
        var vm = this;
        $.ajax({
            url: vm.config.domainRoot + "/_api/web/lists/getbytitle('" + vm.config.listName + "')/items",
            type: 'Get',
            headers: {
                "Accept": "application/json; odata=verbose"
            },
            success: function (data) {
                vm.pages = data.d.results;
                console.log(vm.pages);
            }

        })
    },
    createCustomL:function(){
   


        // Get filed collection
        var fldCollection = oList.get_fields();

        var f1 = clientContext.castTo(
        fldCollection.addFieldAsXml('<Field Type="Text" DisplayName="NewField" Name="NewField" Required="True"/>', true, SP.AddFieldOptions.addToDefaultContentType),
        SP.FieldText);
        f1.set_title("q1");
        f1.set_description(mydescription);
        f1.update();


        //Get filed collection
        var fldCollection = oList.get_fields();

     
        var f2 = clientContext.castTo(
            oList.get_fields().addFieldAsXml('<Field Type="Choice" DisplayName="state" Name="fldchoice" />', true, SP.AddFieldOptions.addToDefaultContentType),
            SP.FieldChoice);
var choices = Array("None", "California", "Colorado", "Connecticut", "Georgia", "Indiana");
f2.set_choices(choices);
f2.update();







}


   }




});

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Vue.js repeater</title>

</head>
<body>
<!-- partial:index.partial.html -->

<div id="app">




<p>Enter your ques</p>


  <component v-repeat="inputs" is="{{ type }}" name="inputs[]">

  </component>
  <button v-on="click: addInput">Add Question</button>
 
</div>
<br>
<button v-on:click="createCustom">Generate</button>
<!-- partial -->

<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.8/vue.js'></script>
<script  src="./script.js"></script>

</body>
</html>

Answer 1

我不知道我是否正确理解，但是如果您想动态地将不同的数据传递给组件，则可以使用道具。在这里https://vuejs.org/v2/guide/components-props.html

如何将变量传递给我的vuejs组件

1 个答案: