我正在vue js中创建购物车。当用户提供正确的信息时,我想在标签上显示用户名。我在谷歌浏览器Windows中遇到以下错误。

vue.js:634 [Vue警告]:属性或方法“用户”未在实例上定义,但在渲染期间被引用。通过初始化属性,确保该属性在data选项中或对于基于类的组件都是反应性的。请参阅:https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties
(在发现 )

这是我的html代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js">

    </script>
</head>
<body>
    <div class="container" id="app">
        <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
            <ul class="navbar-nav">


                <li class="nav-item">
                    <a class="nav-link" href="index.html">Show All Products</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/signin.html">Signin</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="cart.html"> cart</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/index.html" v-on:click="logout">Logout</a>
                </li>


            </ul>
            <div class="nav-item active" v-for="user in users" >
                <label>Username:{{username}}</label>
            </div>

        </nav>
        <br />



        <select class="form-control" id="sel1" v-on:change="applyfilters($event.target.value)">
            <option value="">Select Any value</option>

            <option v-for="v in vendors" :value="v.id">{{ v.name }} </option>
            <!-- <option value="v.id">{{v.name}}</option>-->
            <!--<option value="2">MI</option>-->
        </select>
        <br />
        <div class="row col-12" id="product-list">
            <div class="col-4 card mx-2 p-2" v-for="product in products" style="margin-bottom: 20px">
                <p>Product id:<b />{{product.id}}</p>
                <b>Product Name :</b>{{product.name}}
                <div class="row">
                    <div class="col-4 m-3 p-3">
                        <b>Price :</b>  {{product.price}}
                    </div>
                    <div class="col-4 m-3 p-3">
                        <b>Vendor :</b>  {{product.vendor.name}}
                    </div>
                    <div class="col-6 m-2 p-3">
                        <button class="col btn btn-primary" v-on:click="addToCart(product.id)">Buy</button>
                    </div>
                </div>
            </div>
            <br />
        </div>
    </div>
</body>
</html>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            newTask: '',
            id: 0,
            url: '/todos',
            status: false,
            products: [],
            vendors: []
        },
        methods: {
            getAllProducts() {
                new Promise((resolve) => {
                    axios.get('/api/products').then(function (response) {
                        resolve(response.data)
                    })
                }).then((data) => {
                    this.products = data
                    // console.log(this.products)
                })
            },
           getusers() {
                new Promise((resolve) => {
                    axios.get('/api/users').then(function (response) {
                        resolve(response.data)
                    })
                }).then((data) => {
                    this.users = data

                })
            },




            addToCart(id) {
                console.log(id)
                var obj = { productId: id };
                console.log(obj)
                new Promise((resolve) => {
                    axios.post('/api/cart/', obj).then(function (response) {
                        resolve(response.data)
                    })
                }).then((data) => {

                    console.log(data)
                    console.log(data.id)
                    if (!data.id) {

                        // console.log("fist login")
                        // window.alert("Fist login ")
                        //  window.location = "signin.html";
                    }
                    else {
                        // console.log("successfully add to cart")
                        window.alert("product has been added to your cart")
                    }

                })
            },
            findAllVendors() {
                new Promise((resolve) => {
                    axios.get('/api/vendor').then(function (data) {
                        resolve(data.data)
                        // console.log(data.data)
                    })
                }).then((data) => {
                    this.vendors = data
                })
            },
            applyfilters(id) {
                new Promise((resolve) => {
                    axios.get('/api/products/' + id).then(function (response) {
                        resolve(response.data)
                    })
                }).then((data) => {
                    this.products = data
                    // console.log(this.products)
                })
            }
        }
    })
    app.getAllProducts();
    app.findAllVendors();</script>


她的屏幕截图输出。
javascript - vue js应用程序未定义属性或方法“用户”-LMLPHP

最佳答案

data: {
  users: [],
  newTask: '',
  id: 0,
  url: '/todos',
  status: false,
  products: [],
  vendors: []
},


您的数据必须看起来像这样。这是因为您要在模板中调用this.usersusers,但未在实例上定义它。您还需要在数据中定义属性以使其也具有反应性。

关于javascript - vue js应用程序未定义属性或方法“用户”,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57212025/

10-09 20:07
查看更多