时间戳

首页 > 解决方案 > vue中的重复数据

vue.js - vue中的重复数据

问题描述

我的 vue 有问题，问题是我试图打印 2 个单词，即“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 个输出，但它一直向我显示相同的选项

标签： vue.js

解决方案

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

{
   nama: 'Luthfi',
   show: true
}

您必须像这样更改：

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

推荐阅读