文章/答案/技术大牛

发布

社区首页 >问答首页 >从@change侦听器上的不同输入调用相同方法的Vue.js在API fetch url /categories变量中产生重复值。

问从@change侦听器上的不同输入调用相同方法的Vue.js在API fetch url /categories变量中产生重复值。
EN

Stack Overflow用户

提问于 2021-05-15 09:39:50

回答 2查看 516关注 0票数 0

试图根据两个不同的输入更改API获取url。第一个选择输入选择餐厅。第二个输入单选按钮组选择类别。从这两种类型的输入中调用相同的方法@change并复制该值。我想知道是否可以更具体地针对每个输入侦听器，以便在两个变量中获得不同的值？

这是一个格式良好的网址：

http://dummyendpoint.azurewebsites.net/api/products/123456/Category1

http://dummyendpoint.azurewebsites.net/api/products/{restaurantNumber}/{categoryNumber}

这就是我目前得到的(格式错误/重复的值)：

http://dummyendpoint.azurewebsites.net/api/products/Category1/Category1

或者：

http://dummyendpoint.azurewebsites.net/api/products/123456/123456

我是否需要创建单独的方法，然后将选定的值发送到fetchProducts方法？还是将= event.target.value;绑定更改为更特定于每种类型的输入？

获取所有餐厅数据样本：

产品数据样本：

在下面的完整页面中，fetchProducts是我的代码不正确的地方：

<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<style>
    body {
        min-height: 100vh;
        background: #f5f5f5;
    }

    [v-cloak] {
        display: none;
    }

    .upper-first-letter::first-letter {
        text-transform: uppercase;
    }
    .dollar-sign::before {
        content: "$";
    }
</style>
</head>
<body>
<div id="app">
    <div class="container">
        <!--SELECT RESTAURANT-->
        <div class="card mt-5 shadow-sm">
            <h1 class="card-header">Select Restaurant</h1>
            <select v-model="selectedRest" @change="fetchProducts" class="custom-select custom-select-lg d-inline-block m-3 w-25">
                <option disabled value="">Please select a restaurant</option>
                <option v-for="s in restNums" :value="s.RestaurantNumber">{{s.RestaurantName}}</option>
            </select>
            <p class="lead ml-4 text-secondary">Selected Restaurant Number: <strong>{{ selectedRest }}</strong></p>
        </div>
        <div class="card mt-5 shadow-sm">
            <h1 class="card-header">Menu Board</h1>
            <!--SELECT CATEGORY-->
            <div>
                <input type="radio" id="subsCat" value="Category1" v-model="pickedCat" @change="fetchProducts">
                <label for="subsCat">Subs</label>
                <input type="radio" id="nonSubsCat" value="Category2" v-model="pickedCat" @change="fetchProducts">
                <label for="nonSubsCat">Non Subs</label>
                <p class="lead ml-4 text-secondary">Picked: {{ pickedCat }}</p>
            </div>
            <table class="table">
                <thead class="thead-dark">
                    <tr>
                        <th>Item:</th>
                        <th>Six Inch Price:</th>
                        <th>Foot Long Price:</th>
                    </tr>
                </thead>
                <tbody v-cloak>
                    <tr v-for="p in products">
                        <td>{{p.Name}}</td>
                        <td class="dollar-sign">{{p.SixInchPrice}}</td>
                        <td class="dollar-sign">{{p.FootLongPrice}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
var vm = new Vue({
    el: '#app',
    data: {
        restNums: [],
        selectedRest: '',
        pickedCat: '',
        products: []

    },
    created: function() {
        this.fetchRestaurants();
        //this.fetchProducts();
    },
    methods: {
        fetchRestaurants: function() {
            const urlRestaurants = 'http://dummyendpoint.azurewebsites.net/api/getallrestaurants';

            axios.get(urlRestaurants)
                .then(function(resRestaurants) {
                    vm.restNums = resRestaurants.data.slice(0, 10);
            })
        },

        fetchProducts: function(event) {
            //BOTH VARIABLES GET THE LAST CHOSEN VALUE FROM
            //EITHER OF THE INPUTS (SELECT DROP DOWN OR RADIO BUTTONS)
            //CAN event.target.value BE MORE SPECIFIC TO EACH TYPE OF INPUT
            //CURRENTLY AMBIGUOS AND DUPLICATING VALUE TO BOTH var
            var restNum = event.target.value;
            var categoryNum = event.target.value;
    
            var urlProducts = 'http://dummyendpoint.azurewebsites.net/api/products/' + restNum + '/' + categoryNum;
            
            //FORMAT
            //var urlProducts =     http://dummyendpoint.azurewebsites.net/api/products/{restaurantNumber}/{categoryNumber}
            
            //HARDCODED FULL LENGTH EXAMPLES
            // var urlProducts = http://dummyendpoint.azurewebsites.net/api/products/123456/Category1
            // var urlProducts = http://dummyendpoint.azurewebsites.net/api/products/123456/Category2
            // var urlProducts = http://dummyendpoint.azurewebsites.net/api/products/789000/Category2
            // var urlProducts = http://dummyendpoint.azurewebsites.net/api/products/789000/Category2

            axios.get(urlProducts)
                .then(function(resProducts) {
                    vm.products = resProducts.data.productViewModels.slice(0, 10);
            })
        }
    }
});
</script>
</body>
</html>

`功能？

methods

api

vue.js

url

input

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-05-15 10:41:10

因为您已经在select和input字段中使用v-model。因此，在fetchProducts方法中，只需使用它们而不是从事件中获取值。

fetchProducts: function(event) {    
            var urlProducts = 'http://dummyendpoint.azurewebsites.net/api/products/' + this.selectedRest + '/' + this.pickedCat;

            axios.get(urlProducts)
                .then(function(resProducts) {
                    vm.products = resProducts.data.productViewModels.slice(0, 10);
            })
        }

票数 0

Stack Overflow用户

发布于 2021-05-15 10:48:25

也许这对你有帮助：

<template>
  <div id="app">
    <div class="container">
      <!--SELECT RESTAURANT-->
      <div class="card mt-5 shadow-sm">
        <h1 class="card-header">Select Restaurant</h1>
        <select
          v-model="selectedRest"
          @change="fetchProducts(selectedRest)"
          class="custom-select custom-select-lg d-inline-block m-3 w-25"
        >
          <option disabled value="">Please select a restaurant</option>
          <option v-for="s in restNums" :value="s.RestaurantNumber">
            {{ s.RestaurantName }}
          </option>
        </select>
        <p class="lead ml-4 text-secondary">
          Selected Restaurant Number: <strong>{{ selectedRest }}</strong>
        </p>
      </div>
      <div class="card mt-5 shadow-sm">
        <h1 class="card-header">Menu Board</h1>
        <!--SELECT CATEGORY-->
        <div>
          <input
            type="radio"
            id="subsCat"
            value="Category1"
            v-model="pickedCat"
            @change="fetchProducts(selectedRest)"
          />
          <label for="subsCat">Subs</label>
          <input
            type="radio"
            id="nonSubsCat"
            value="Category2"
            v-model="pickedCat"
            @change="fetchProducts(selectedRest)"
          />
          <label for="nonSubsCat">Non Subs</label>
          <p class="lead ml-4 text-secondary">Picked: {{ pickedCat }}</p>
        </div>
        <table class="table">
          <thead class="thead-dark">
            <tr>
              <th>Item:</th>
              <th>Six Inch Price:</th>
              <th>Foot Long Price:</th>
            </tr>
          </thead>
          <tbody v-cloak>
            <tr v-for="p in products">
              <td>{{ p.Name }}</td>
              <td class="dollar-sign">{{ p.SixInchPrice }}</td>
              <td class="dollar-sign">{{ p.FootLongPrice }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <h4>Show URL now: {{ apiUrl }}</h4>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      restNums: [],
      selectedRest: "",
      pickedCat: "",
      products: [],
      apiUrl: "",
    };
  },
  created() {
    this.fetchRestaurants().then((data) => {
      this.restNums = data;
    });
    //this.fetchProducts();
  },
  methods: {
    fetchRestaurants: function () {
      return new Promise((resolve) => {
        setTimeout(() => {
          const mockData = [
            {
              RestaurantId: 6969,
              RestaurantNumber: "12345",
              RestaurantName: "Test Res",
              updatedBy: "dev",
            },
            {
              RestaurantId: 666,
              RestaurantNumber: "999",
              RestaurantName: "Test Res2",
              updatedBy: "suba",
            },
          ];
          resolve(mockData);
        }, 500);
      });
    },

    fetchProducts: function (event) {
      console.log(event);
      this.apiUrl = `http://dummyendpoint.azurewebsites.net/api/products/${event}/${this.pickedCat}`;
    },
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

在这里可以找到一个可播放的示例，CodeSandbox。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67545312

复制

相似问题

问从@change侦听器上的不同输入调用相同方法的Vue.js在API fetch url /categories变量中产生重复值。
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从@change侦听器上的不同输入调用相同方法的Vue.js在API fetch url /categories变量中产生重复值。EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从@change侦听器上的不同输入调用相同方法的Vue.js在API fetch url /categories变量中产生重复值。
EN