Кнопки «Следующая / Предыдущая» таблицы в VueJS с Javascript - PullRequest
Новая
       6

Кнопки «Следующая / Предыдущая» таблицы в VueJS с Javascript

0 голосов
/ 31 марта 2020

Это методы, которые я пытаюсь использовать, чтобы кнопки Next и Previous работали, чтобы они могли переключаться на другую таблицу: 

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>

1 Ответ

0 голосов
/ 01 апреля 2020

В вашем коде единственным свойством, передаваемым вашему компоненту tabell, является 'livescore', и оно имеет значение null и никогда не изменяется. Похоже, вам нужно 'livescore', чтобы быть вычисляемым свойством, которое имеет отношение к table_counter, а не к свойству data, например 

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