带有Javascript的VueJS中表的下一个/上一个按钮

Question

这些是我要用来使“下一个”和“上一个”按钮起作用的方法，因此它们可以切换到另一个表：

export default {
  name: "News",
  props: {
    msg: String
  },
  components: {
    tabell
  },
  created() {
    fetch("/data.json")
      .then(response => response.json())
      .then(result => {
        this.articles = result[2].articles;
        console.log(result[2].articles[0].id);
      });
  },
  data() {
    return {
      articles: null,
      table_counter: 0,
      livescore: null,
      cases: [
        { id: 1, position: "69" },
        { id: 2, position: "70" }
      ]
    };
  },
  methods: {
    nextTable() {
      this.table_counter++;
      console.log("+1");
    },
    prevTable() {
      this.table_counter--;
      console.log("-1");
    }
  }
};

这是我的HTML，所有这些都导致前一个按钮执行+1，控制台将其记录，消失，不显示新案例的值，然后变成下一个按钮并执行-1，然后返回上一个按钮。

        <div
          class="nextprevbuttons"
          v-for="(case_item, index) in cases"
          :key="case_item.id"
          v-show="table_counter === index"
          :class="{'is-active-slide': table_counter === index}"
        >
          {{index}}
          <span v-if="cases.length-1!=table_counter">
            <button class="buttontable" @click="nextTable">
              <i class="fas fa-chevron-left"></i>
            </button>
          </span>
          <span v-if="table_counter!=0">
            <button class="buttontable" @click="prevTable">
              <i class="fas fa-chevron-right"></i>
            </button>
          </span>
        </div>
        <tabell v-bind:livescore="livescore"></tabell>
      </div>
    </div>
  </div>

Answer 1

在您的代码中，唯一传递给tabell组件的属性是'livescore'，该属性设置为null且从不更改。看起来您需要'livescore'成为与table_counter有关的计算属性，而不是data属性，例如

computed: {
  livescore() {
    return this.articles[this.table_counter];
  }
}