Javascript 如何在单击按钮时使用vue在json文件中显示结果？

是的，又是我

当我填写必填字段并按下按钮时，我想从json文件中提取数据

例如，让我们将开发人员部分写入jobs部分。然后选择伊斯坦布尔作为选项并单击查找

var app=新的Vue{ el:应用程序， 数据：{ 成立日期：【】， 搜索： }, 创造{ fetchjob.json .thenres=>{ 返回res.json； } .thenres=>{ this.founded=res.items； }; }, 计算：{ filteredFounded:函数{ 返回此.founded.filteritems=>{ return items.positionName.matchthis.search }; } } }; 找到工作 硒化 İstanbul 安卡拉 İzmir 圣安娜卡莱 发现 {{items.companyName}

{{items.positionName}到大写}

{{items.cityName}

{{items.townName}

{{items.distance}

---

如果我理解你的问题：

由于您将卡体重复div直接绑定到筛选过程，因此每次表单更改时视图都会更新，因此“查找”！按钮没用 你不考虑城市选择 要解决这些问题，请将模型绑定到城市选择器，并为JSON数据和所选数据声明单独的变量：

<select name="" class="city" id="" v-model="city">

然后在创建时将JSON数据放入sourceJobs：

fetch("job.json").then(function (res) {
  this.sourceJobs = res.json();
});

边注释：这个架构对于大型JSON数据是不可行的，也许你应该考虑通过调用后端API来过滤数据。但这不是当前的问题

既然表单数据已绑定到data.search和data.city，并且作业池存储在data.sourceJobs中，那么您希望不再计算方法来筛选data.sourceJobs并将结果子集复制到data.selectedJobs中：

最后，在查找时调用此方法！单击按钮：

<button v-on:click="selectJobs">Find!</button>

如果您更改了体系结构以进行API调用来进行过滤，那么您只需要删除创建的部分并从selectJobs方法中进行API调用

---

旁白，无关注释：查找/找到/找到搜索的成功结果vs.查找/创建/创建创建创建，为某物建立基础-一座城市，一家公司….

你能解释问题是什么吗？我将尝试你建议的解决方案，我的案例是：当我将必要的信息写入空白处时，-例如，一个缺口的工作和另一个缺口的工作城市名称-我想看看该城市的工作。我从未使用Vue，但我使用了您的代码并进行了处理，我相信它是按预期工作的。我尝试了您的解决方案，但失败了：/但您给了我一个想法，它成功了。但也有许多不足之处。

methods: {
  selectJobs: function () {
    this.selectedJobs = this.sourceJobs
      .filter((job) => {
        return job.cityName === this.city && job.positionName.match(this.search);
      })
  }
}

<button v-on:click="selectJobs">Find!</button>