Question

我正在使用访问者将要使用的表单，回答导致总分数的不同问题。

我从服务器端获得了axios的问题。我看到了选择“v-model =''”的例子，但我的需要是动态的。

我看到的一个例子是： https://jsfiddle.net/logaretm/u0om9zz6/

这有“硬编码”：已选择：0，选择2：0，选择3：0，

我需要这是动态的，我该怎么做？

这是我到目前为止所提出的：

<div class="" v-for="(q, key) in questions" :value="key">

            <h4>{{q.Title}}</h4>
            {{q}}
            <div class="form-group">
                <select v-model="q.SelectedAnswer" class="form-control" @@change="retotal(q)">
                    <option value="" selected>Select Answer!</option>
                    <option v-for="(answer, key) in q.Answers" 
                            :value="key"
                            :name="groupName(answer)"
                            >{{ answer.answer}} {{ '$' + answer.points }}
                    </option>
                </select>
            </div>

        </div>


<script type="text/javascript">

new Vue({
    el: '#app',
    data: {

        questions: {
        },

        total: 0
    },
    methods: {
        groupName(answer) {
            console.log(answer);
            return 'answer' + answer.Id
        },
        retotal: function (q) {
            let newTotal = 0;

            console.log(this.findObjectByKey(q.Answers, 'Id', "1"));

            newTotal = newTotal + this.findObjectByKey(q.Answers, 'Id', "1").points;

            this.total = newTotal;
        },
        findObjectByKey: function (array, key, value) {

            for (var i = 0; i < array.length; i++) {
                if (array[i][key] === value) {
                    return array[i];
                }
            }
            return null;
        }
    },
    created: function () {
        axios.get("/api/QuestionFormApi/GetQuestionFormBlockViewModel")
            .then((response) => {
                this.questions = response.data.Questions;
            }, (error) => {
                alert("error")
        })
    },
});

来自服务器的

this.questions：

(3) [{…}, {…}, {…}, __ob__: _e]
0: {__ob__: _e}
1: {__ob__: _e}
2: {__ob__: _e}

Image

我该怎么做？

BR

Answer 1

不确定它是否是您想要的，但与您在不使用任何其他变量时显示的示例相同。

https://jsfiddle.net/u0om9zz6/233/

模板：

<div id="app">
  <div class="" v-for="(q, key) in questions" :value="key">
  <h4>{{q.title}}</h4>
    <div class="form-group">
      <select v-model="q.selectedAnswer">
        <option disabled value="">Choose your answer</option>
        <option v-for="answer in q.answers" v-bind:value="answer">{{answer.answer}}</option>
      </select>
       {{showAnswer(q.selectedAnswer)}}
    </div>
  </div>
  <p>
  Total points: {{total}}
  </p>
</div>

VUE：

new Vue({
  el: '#app',
  data: {
    questions: [
          {id: 1, title: 'testQ1', answers: [
              {id: 1, answer: 'test1', points: 0},
              {id: 2, answer: 'test2', points: 1},
              {id: 3, answer: 'test3', points: 2}
            ], selectedAnswer: ''
      },
      {id: 2, title: 'testQ2', answers: [
              {id: 1, answer: 'test4', points: 2},
              {id: 2, answer: 'test5', points: 1},
              {id: 3, answer: 'test6', points: 0}
            ], selectedAnswer: ''
      },
      {id: 3, title: 'testQ3', answers: [
              {id: 1, answer: 'test7', points: 1},
              {id: 2, answer: 'test8', points: 2},
              {id: 3, answer: 'test9', points: 0}
            ], selectedAnswer: ''
      }
        ],
    selected: []
  },
  computed: {
    total() {
        let points = 0;
        this.questions.forEach(q => {
                points += q.selectedAnswer ? q.selectedAnswer.points : 0;   
      });
      return points;
    }
  },
  methods: {
    showAnswer(selectedAnswer) {
      if(selectedAnswer) {
        return 'Selected: ' + selectedAnswer.answer + ', points: ' + selectedAnswer.points
      }
      return '';
    }
  }
})

VueJS动态表格 - 完整的动态问题，可用的答案与不同的点

1 个答案: