如何在这个 Vue 3 应用程序中使 prop 响应式？

我一直在使用 Vue 3 和News API https://newsapi.org/.

我目前正在研究搜索功能。

In App.vue I have:

<template>
  <TopBar @search="doSearch" />
  <div class="container">
     <HomeView searchString="searchTerm" v-if="!searchTerm.length" />
     <SearchResultsView searchString="searchTerm" v-if="searchTerm.length" />
  </div>
  <AppFooter />
</template>

<script>
import TopBar from '@/components/TopBar.vue';
import AppFooter from '@/components/AppFooter.vue';
import HomeView from '@/views/HomeView.vue';
import SearchResultsView from '@/views/SearchResultsView.vue';

export default {
  name: 'App',
  components: {
    TopBar,
    AppFooter,
    HomeView,
    SearchResultsView
  },

  data: () => ({
    searchTerm: ''
  }),

  methods: {
    doSearch: function(searchTerm) {
      this.searchTerm = searchTerm;
      console.log(this.searchTerm);
    }
  }
}
</script>

我发出search事件形式TopBar.vue组件，其中搜索形式为：

<template>
  <nav class="navbar py-1 sticky-top navbar-expand-md">
    <div class="container-fluid">
      <form ref="searchForm" class="search_form w-100 mx-auto mt-2 mt-md-0">
          <div class="input-group">
            <input
              @change="handleChange"
              v-model="searchTerm"
              class="form-control search-box"
              type="text"
              placeholder="Search..."
            />
            <div class="input-group-append">
              <button class="btn" type="button">
                <font-awesome-icon :icon="['fas', 'search']" />
              </button>
            </div>
          </div>
        </form>
    </div>
  </nav>
</template>

<script>
export default {
  name: "TopBar",

  methods: {
    handleChange(event){
      this.$emit('search', event.target.value)
    }
  }
};
</script>

搜索字符串被根正确“捕获”App.vue成分。我尝试将它传递给ArticleList.vue组件，使其成为组件使用的端点的一部分：

<template>
  <div v-if="articles.length" class="row">
    <div
      v-for="article in articles"
      :key="article._id"
      class="col-xs-12 col-sm-6 col-lg-4 col-xl-3"
    >
      <ArticleCard :article="article" />
    </div>
  </div>
  <p v-else class="text-center">
    No articles to display
  </p>
</template>

<script>

import ArticleCard from './ArticleCard.vue';

export default {
  name: "NewsList",
  components: {ArticleCard},

  props: {
    whatToShow: {
      type: String,
      required: true,
    },

    searchString: {
      type: String,
      required: true,
      default: ''
    }
  },

  data: () => ({
    language: 'en',
    page_size: 24,
    current_page: 1,
    articles: [],
  }),

  mounted() {
    this.getArticles();
  },

  methods: {
    getArticles() {
      let endpoint = `${process.env.VUE_APP_API_URL}/${this.$props.whatToShow}?q=${this.$props.searchString}&language=${this.language}&page_size=${this.page_size}&page=${this.current_page}&apiKey=${process.env.VUE_APP_API_KEY}`;

      console.log(endpoint);

      this.$axios
        .get(endpoint)
        .then((response) => {
          this.articles = response.data.articles;
          console.log(this.articles);
        })
        .catch((err) => console.log(err));
    },
  }
};

截屏

问题

The searchString支柱中endpoint上面的变量在进行搜索（例如“money”）和 console.log(endpoint) 输出时不会更新

https://newsapi.org/v2/everything?q=&language=en&page_size=24&page=1&apiKey=myappykey123secret

代替

https://newsapi.org/v2/top-headlines?q=money&language=en&page_size=24&page=1&apiKey=myappykey123secret

问题

1. 我究竟做错了什么？
2. 解决此问题最可靠的方法是什么？

是的，你是对的，searchString更新于App.vue但您没有看到 ArticleList 组件中的此更改。

请求方法 getArticles 仅在挂载时触发。你必须看searchString道具和触发器getArticles()再次方法