Question

我是Vue的新手。我正在努力提高自己。

我在v-for中使用道具时出错。例如：

模板：

<template>
    <div class="row">
      <div v-for="question in questions" class="col-md-12"><br />
        <router-link :to="'/question/' + question.question_id">
                <a :href="'/question/' + question.question_id" class="btn btn-primary btn-md pull-left">{{question.title}}</a>
        </router-link>
      </div>
    </div>
</template>

脚本:(页面组件相同）

props: [
        'questions',
    ],
    data () {
        return {
            questionList: {}
        }
    },
    created() {
        this.fetchQuestions();
    },
    computed: {
        pageNumber () {
            return (!isNaN(this.$route.params.id)) ? this.$route.params.id : 1;
        },
        hasPrevious () {
            return (this.$route.params.id > 0) ? true : false;
        },
    },
    methods: {
        fetchQuestions() {
            fetch(`http://api.stackexchange.com/2.2/questions?key=MY_KEY&page=
${parseInt(this.pageNumber)}
&pagesize=10&order=desc&sort=activity&tagged=vue.js&site=stackoverflow`, {
                method: 'GET',
              }).then((resp) => {
                return resp.json();
              }).then((obj) => {
                this.questions = obj.items;
              });
        },
    }

如果我使用数据进行迭代，则迭代不起作用。我使用道具进行迭代，因为属性从页面组件中获取它的值。

如果我这样使用它，它第一次运行时没有错误：

data () {
    return {
        questionList: this.questions,
    }
},
 //... blah blah
methods: {
    fetchQuestions() {
        // blahblah
        .then((obj) => {
            this.questionList = obj.items;
          });
    },
}

但是当我更改页面时（是的，我的项目有分页），questionList没有更新。

如果我这样使用它：

data () {
    return {
        questionList: {},
    }
},
 //... blah blah
methods: {
    fetchQuestions() {
        // blahblah
        .then((obj) => {
            this.questions = obj.items;
          });
    },
}

即使页面发生变化，也会出错。

正如我所说，我是Vue的新人。我该怎么做才能解决这个问题？

Answer 1

首先，更改模板以迭代questionList。

<div v-for="question in questionList" class="col-md-12">

然后，将脚本更改为第二个选项。

data () {
    return {
        questionList: this.questions,
    }
},
 //... blah blah
methods: {
    fetchQuestions() {
        // blahblah
        .then((obj) => {
            this.questionList = obj.items;
          });
    },
}

您希望组件迭代本地副本questionList。您使用属性questionList初始化questions。之后，您希望fetchQuestions方法更新questionList。

Answer 2

尝试更改

props: [
    'questions',
],

到此

props: [
   questions: [],
],

Vue2：避免直接改变道具，因为无论何时都会覆盖该值

2 个答案: