我正在从 https://newsapi.org/发出 API 请求，并且能够在启动时使用 created(( 方法执行此操作。我有一个名为 Navbar.vue 的组件，其中包含我想在单击时用来发出新的 api 请求并为 api 请求传递新闻源变量的按钮(例如"cnn"、"fox-news"(。即使我已经在我的 Navbar.vue 组件中注册了我的 News.vue，我似乎无法使用创建的方法开始另一个实例化。这也是一个屏幕录像： https://drive.google.com/file/d/173x9PxLs5S2pWMYcHuXon0CQfoLwXNMT/view
我试过打电话给NewsVue.created(来源(
Top-Headlines/src/Components/Navbar.vue：
<template>
<div>
<b-navbar toggleable="lg" type="light" variant="success">
<b-container>
<b-navbar-brand href="#">Top Headlines</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-button-group>
<b-button variant="danger" v-on:click="getNews('cnn')">CNN</b-button>
<b-button variant="info" v-on:click="getNews('espn')">ESPN</b-button>
<b-button variant="warning" v-on:click="getNews('nbc-news')">NBC News</b-button>
</b-button-group>
</b-collapse>
</b-container>
</b-navbar>
</div>
</template>
<script>
// import News from '../views/News';
import NewsVue from '../views/News.vue';
export default {
// components: {
// NewsVue,
// },
data() {
return {
meal: ''
}
},
methods: {
getNews(source) {
console.log(NewsVue);
NewsVue.created(source);
}
}
}
Top-Headlines/src/views/News.vue：
<template>
<div class="articles-container">
<template v-for="article in headlines">
<div :key="article.publishedAt" class="article-container">
<div class="article-source">
<a v-bind:href="article.url">
<h5>{{ article.title }}</h5>
</a>
</div>
</div>
</template>
</div>
</template>
<script>
// @ is an alias to /src
"use strict";
export default {
name: "news",
data() {
return {
headlines: [],
search: "",
newsSource: ""
};
},
methods: {
getTopHeadlines(newsSource) {
console.log(newsSource);
let url = '';
if (newsSource !== "" && newsSource !== undefined) {
url =
"https://newsapi.org/v2/top-headlines?" +
"pageSize=10&" +
"sources="+newsSource+"&" +
"apiKey=ab07dee4fb7e4f198621ab4da0b1e5e9";
} else {
url =
"https://newsapi.org/v2/top-headlines?" +
"country=us&" +
"pageSize=10&" +
"apiKey=ab07dee4fb7e4f198621ab4da0b1e5e9";
}
var req = new Request(url);
fetch(req)
.then(response => response.json())
.then(json => {
this.headlines = json.articles;
});
}
},
created(newsSource) {
this.getTopHeadlines(newsSource);
}
};
</script>
我希望该页面能够重新加载新闻来源过滤的标题。
错误消息："TypeError： this.getTopHeadlines 不是一个函数 at Object.create (webpack-internal:///./node_modules/cache-">
created是系统调用的正常名称，并且this设置为组件。 看来你是在尝试直接调用它。您可以使用apply或简单地传入来设置this自己。
无论哪种方式，都不要将函数命名为 CREATED ，因为它是为 Vue 生命周期保留的。
NewsVue.created2(source, NewsVue);
调用函数created2并设置this上下文。
NewsVue.created2.call(NewsVue, source);
// or
NewsVue.created2.apply(NewsVue, [source]);
无论哪种方式，都将调用 created2 的函数，并将 this 设置为 NewsVue 和 1 参数source 。
使用观察程序函数，然后设置观察程序中的数据。
顺便说一句，NewsView 应该将 newsSource 作为一个属性，我什至没有在您的模板中看到该组件......也许这就是你问题的根源。 您需要在模板中<NewsView :newsSource='newsSource'/>类似内容。 然后将新闻源移动到道具上，并使观察者立即生效。
export default {
name: "news",
data() {
return {
headlines: [],
search: "",
newsSource: ""
};
},
watch: {
newsSource(value) {
const newsSource = value;
console.log(newsSource);
let url = '';
if (newsSource !== "" && newsSource !== undefined) {
url =
"https://newsapi.org/v2/top-headlines?" +
"pageSize=10&" +
"sources=" + newsSource + "&" +
"apiKey=ab07dee4fb7e4f198621ab4da0b1e5e9";
} else {
url =
"https://newsapi.org/v2/top-headlines?" +
"country=us&" +
"pageSize=10&" +
"apiKey=ab07dee4fb7e4f198621ab4da0b1e5e9";
}
var req = new Request(url);
fetch(req)
.then(response => response.json())
.then(json => {
this.headlines = json.articles;
});
}
},
};