Vue2：いつでも値を上書きするので、小道具を直接変更することは避けてください。

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

に

props: [ 
    'questions', 
], 

を変更してみてください、questionListを反復するためにあなたのテンプレートを変更します。

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

次に、スクリプトを2番目のオプションに変更します。

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

は、あなたのコンポーネントがquestionList、ローカルコピーを反復します。プロパティquestionsでquestionListを初期化します。その後、fetchQuestionsメソッドをquestionListに更新する必要があります。

Answer 2

まずこの

props: [ 
    questions: [], 
],