Question

我的vue出现问题，问题是我试图打印两个单词，即“ A.2”和“ B.3”，但是当我打印时，它仅显示“ B.3” ”和“ B.3”。这是我的代码

这是一个简单的测验项目，因此，每当用户选择状态为true的选项a时，它应该在分数上增加1分，而我还没有做到这一点。

  <template>
  <div class="hello">
    <h1 v-if="show">hai</h1>
    <h1 v-else>hehe</h1>
    <p>{{ nama}}</p>
    <input type="text" v-model="nama">
    <button type="button" v-on:click="hideTitle">Click Me</button>
    <h3> 1.Yang Dipakai Di sepatu adalah </h3>
    <p>{{ nama}}</p>
    <h3 v-for="j in jawaban">
    <input type="radio">
    {{j}}
    </h3>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data : function() {
  return{
    nama: 'Luthfi',
    show: true
    },
    {
    jawaban: 'A.2',
    correct: true
    },
    {
    jawaban: 'B.3',
    correct: false
    },
    {
    jawaban: 'C.4',
    correct: false
    }
    },
  methods: {
    hideTitle() {
      this.show = !this.show
    }
  },
  mounted: function () {
    this.nama = 'Fitra'
  }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

我希望从选项A到D有4个输出，但它始终显示相同的选项

Answer 1

在您的代码中，data()仅返回一个包含

的对象

{
   nama: 'Luthfi',
   show: true
}

您必须将其更改为：

data : function() {
    return{
        nama: 'Luthfi',
        show: true,
        jawaban: 'A.22',
        correct: true,
        jawabann: 'B.3'
    }
}

Vue中的重复数据

1 个答案: