Javascript 属性或方法“；“用户”；未定义vue js应用程序_Javascript_Vue.js

Javascript 属性或方法“；“用户”；未定义vue js应用程序

javascript vue.js

Javascript 属性或方法“；“用户”；未定义vue js应用程序,javascript,vue.js,Javascript,Vue.js,我正在vue js中创建购物车。当用户提供正确的信息时，我想在标签上显示用户名。我在google chrome windows中遇到以下错误 vue.js:634[vue warn]：属性或方法“users”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性在数据选项中或对于基于类的组件是被动的。请参阅：。（可在中找到）这是我的html代码 <!DOCTYPE html> <html lang="en"> <head> <titl

我正在vue js中创建购物车。当用户提供正确的信息时，我想在标签上显示用户名。我在google chrome windows中遇到以下错误

vue.js:634[vue warn]：属性或方法“users”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性在数据选项中或对于基于类的组件是被动的。请参阅：。（可在中找到）

这是我的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>


引导示例










用户名：{{Username}


选择任意值
{{v.name}


产品id:{{Product.id}
产品名称：{{Product.Name}
价格：{{product.Price}}
供应商：{{product.Vendor.name}
购买


让应用程序=新Vue({
el:“应用程序”，
数据：{
新任务：''，
id:0，
url:“/todos”，
状态：false，
产品：[]，
供应商：[]
},
方法：{
getAllProducts（）{
新承诺（（决议）=>{
get（'/api/products'）。然后（函数（响应）{
解析（response.data）
})
})。然后（（数据）=>{
这是产品=数据
//console.log（this.products）
})
},
getusers（）{
新承诺（（决议）=>{
get（'/api/users'）。然后（函数（响应）{
解析（response.data）
})
})。然后（（数据）=>{
this.users=数据
})
},
addToCart（id）{
控制台日志（id）
var obj={productId:id}；
控制台日志（obj）
新承诺（（决议）=>{
post（'/api/cart/'，obj）.then（函数（响应）{
解析（response.data）
})
})。然后（（数据）=>{
console.log（数据）
console.log（data.id）
如果（！data.id）{
//console.log（“首次登录”）
//window.alert（“首次登录”）
//window.location=“signin.html”；
}
否则{
//console.log（“成功添加到购物车”）
window.alert（“产品已添加到购物车中”）
}
})
},
findAllVendors（）{
新承诺（（决议）=>{
get（'/api/vendor'）。然后（函数（数据）{
解析（data.data）
//console.log（data.data）
})
})。然后（（数据）=>{
this.vendors=数据
})
},
应用过滤器（id）{
新承诺（（决议）=>{
get（'/api/products/'+id）.then（函数（响应）{
解析（response.data）
})
})。然后（（数据）=>{
这是产品=数据
//console.log（this.products）
})
}
}
})
app.getAllProducts（）；
app.findAllVendors（）；

她的是屏幕截图输出。

您的数据必须如下所示。这是因为您正在调用模板中的

this.users

或

users

，但它没有在实例上定义。您需要在数据中定义属性，使其也具有反应性。

错误消息包括有关如何解决问题的说明。你能解释一下你需要什么进一步的信息吗？谢谢。现在开始工作了。你能检查一下这些问题吗

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