个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
请查看我的代码，我不确定我做错了什么？。我想在 id="select1"更改时获取新的 JSON 数据，然后将参数发送到 id="select2"，然后 id="select2"将在选项中显示数据。
var appZone = new Vue({
el: '#el',
data() {
return {
options: [],
list:[],
selected:''
}
},
mounted() {
var self = this
axios.get('/wp-json/tour-api/v1/search/0')
.then(function (response) {
console.log(response);
self.options = response.data;
})
.catch(function (error) {
console.log(error);
});
},
methods: {
onChange: function (){
axios.get('/wp-json/tour-api/v1/search/'+this.selected)
.then(function (response) {
//console.log(response);
self.list = response.data;
console.log(list)
})
.catch(function (error) {
console.log(error);
});
}
}
})<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="el">
<select id="select1" v-model="selected" class="custom-select" v-on:change="onChange" >
<option v-for="item in options" v-bind:value="item.id" >
{{ item.title }}
</option>
</select>
<span>Selected: {{ selected }}</span>
<select id="select2" class="custom-select" >
<option v-for="data in list" v-bind:value="data.country_id">{{ data.title }}</option>
</select>
</div>最佳答案
试试这个:
var appZone = new Vue({
el: '#el',
data() {
return {
options: [],
list:[],
selected:''
}
},
mounted() {
var self = this
axios.get('/wp-json/tour-api/v1/search/0')
.then(function (response) {
console.log(response);
self.options = response.data;
})
.catch(function (error) {
console.log(error);
});
},
methods: {
onChange: function (){
var self = this
console.log(self.list);
axios.get('/wp-json/tour-api/v1/search/0'+this.selected)
.then(function (response) {
//console.log(response);
self.list = response.data;
console.log('before list');
console.log(self.list);
console.log('after list');
})
.catch(function (error) {
console.log(error);
});
}
}
})<html>
<head>
<title>sjai</title>
</head>
<body>
<div id="el">
<select id="select1" v-model="selected" class="custom-select" v-on:change="onChange" >
<option v-for="item in options" v-bind:value="item.id" >
{{ item.title }}
</option>
</select>
<span>Selected: {{ selected }}</span>
<select id="select2" class="custom-select" >
<option v-for="data in list" v-bind:value="data.country_id">{{ data.title }}</option>
</select>
</div>
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0472716144362a302a36" rel="noreferrer noopener nofollow">[email protected]</a>"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="main.js"></script>
</body>
</html> 
希望这对您有帮助!
关于json - 如何使用v-on :change in VueJS and send the parameter to get update JSON data with axios，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45808740/
26
4
0
我有一个 axios 拦截器，我在其中捕获 401 错误并将用户重定向到登录页面。问题是在 window.location 运行之后和实际重定向之前 - axios 操作继续到原始调用者。我想停止进程
我正在调用一个返回至少 2 个成功状态代码的 Rest API。 正常的 200 OK 和 202 Accepted 状态代码。 两者都在正文中返回一个内容。 如果我在 postman 中执行我的电话
任何人都可以提出任何从 Axios 获得响应时间的方法吗？我找到了 axios-timing，但我真的不喜欢它(有争议，我知道)。我只是想知道是否有人找到了一些记录响应时间的好方法。 最佳答案 您可以
我正在尝试使用 axios.create() 创建一个 axios 实例但似乎无法弄清楚如何在实例上设置默认方法。 不工作 export default axios.create({ requ
我正在将 axios 用于 React 应用程序，并且我想记录我在应用程序中任何位置进行的所有 axios 调用。我已经通过 create 函数使用了 axios 的单个全局实例，并且我能够记录通用的
我有一个公开一些端点的 NestJS 应用程序，我已经编写了一个客户端应用程序，我计划将其作为 NPM 包发布以与 nest 服务器一起使用。我正在尝试编写启动 nest 服务器的端到端测试，将其连接
我一直在使用这个将图像文件上传到 API (Graphcool)，并且一切正常: fileUpload(file) { let data = new FormData();
在我的代码库中有使用创建的各种 Axios 实例 axios.create() 因为我的应用程序中使用了多个基本 URL。所以每个 baseURL 我们都创建了一个对应的 Axios 实例。 现在在
我有一个 API 实用程序函数，它使用构造函数符号调用 axios: axios({ method, url: `${BASE_URL}/${url}`, data }); 我想用
我正在尝试使用 mockAxios 来测试 axios 拦截器。 export default { get: jest.fn(() => Promise.resolve({ data: {}
https://github.com/axios/axios#cancellation 我正在研究如何取消上传 PUT 请求并在文档中遇到了这一部分。为什么需要 token 才能取消？简单来说流程或过
axios.put('http://localhost:3000/api/userDatas/findUserAddProp',{ params: { userId: "5bb
我的 axios promise 没有按预期工作。我猜执行是在 forEach 循环内开始的。我希望 axios 执行仅在 batch.commit 之后开始 aMobileNumbers.forEa
有区别吗 useEffect(()=>{ async function fetchData(){ await axios .get(path, config) .t
我正在使用 axios 获取信息，并且我需要在不同 axios 响应的另一个处理程序中使用该信息。我似乎无法在第二个响应处理中使用第一个响应中加载的数据。 例如: const [firstData,
我在我的 React 应用程序中使用 axios，在我的许多脚本中使用 import axios from 'axios 。我想使用一种为所有 axios 调用/错误调用的中间件。我该如何处理这个问题
在我的应用程序中，为了对用户进行身份验证，我调用了 fetchData 函数。如果用户 token 无效，应用程序将运行 axios.all()，我的拦截器将返回大量错误。 如何防止 axios.al
我已经按照 npm 包文档中的建议编写了一个 Axios POST 请求，例如: var data = { 'key1': 'val1', 'key2': 'val2' } axios
谁能提供有关 axios 和 vue-axios 之间区别的详细信息？我们需要使用哪一个？两者都需要使用api吗？ 谢谢 最佳答案 vue-axios 只是一个包装器，将 axios 暴露给组件作为
我在向 Loopback(v3) API 发出的 Axios 请求中使用变量时遇到了麻烦。 什么有效？如果我使用“REST 表示法”，它运行良好: getInfo() { axios.get(
我是一名优秀的程序员,十分优秀！