vue.js获取下拉列表选中的值并传给ajax作为参数

问题描述

问 题

下面代码报错了，求大神解答

Uncaught TypeError: Cannot read property 'post' of undefined
    at VueComponent.submit (eval at <anonymous> (app.js:860), <anonymous>:24:14)
    at Proxy.boundFn (eval at <anonymous> (app.js:765), <anonymous>:125:14)
    at submit (eval at <anonymous> (app.js:1148), <anonymous>:10:13)

<template>

    <div id="machine-header">
          <form @submit.prevent="submit">
            <div id="machine-list" class="field">
                <select>
                    <option v-for="machine_name in get_machine_list" ref="selectedMachine">
                        {{ machine_name }}
                    </option>
                </select>
            </div>
        
            <input type="submit" value="提交">
          </form>
    </div>

</template>

<script>
    export default {
        data() {
            return {
                machine_name: ''
            };
        },

        computed: {
               get_machine_list() {
                   return ['fd-11', 'fd-12', 'fd-13'];
               }
        },
        methods: {
            submit: function() {
                var formData = JSON.stringify(this.$refs.selectedMachine.value); 

                this.$http.post('/path/to', formData).then((response) => {
                      // success callback
                }, (response) => {
                      // error callback
                });
            }
        }

    }
</script>

解决方案

var Vue = require('vue');

var VueResource = require('vue-resource');

Vue.use(VueResource);

这篇关于vue.js获取下拉列表选中的值并传给ajax作为参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！