这是带有 vue.js 的单页应用程序，它进行了一些简单的计算，我试图在 django 中实现这个计算，但它没有给我想要的结果。 在这里，我在 vue.js 中创建了动态数组，这只完美地显示了产品的图像，但没有显示 product.name 和 product.sell_price 以及 @click.prevent="addToCart(product)"这个功能不起作用??我该如何解决？

vue.js

   <script src="{% static 'js/vue.js' %}"></script>

   <script type="text/javascript" src="{% static '/js/vue-resource.js' %}"></script>
    <script>

 new Vue({
    el: '#posApp',
    
    data: {
        total: 0,
        discount: 0,
        products: [
            {% for product in products %}
                {
                    "id": {{product.id}},
                    "name": "{{product.name}}",
                    "image": "/media/{{product.image}}",
                    "price": {{product.sell_price}}
                },
              {% endfor %}

        ],
        cart: [],
        search: ""
    },
    methods: {

        addToCart: function(product){

            var found = false;
            for (var i = 0; i < this.cart.length; i++){
                if (this.cart[i].id === product.id){
                    this.cart[i].quantity++;
                    found = true;
                }
            }
            if (!found) {
                this.cart.push({
                    id: product.id,
                    name: product.name,
                    sell_price: product.sell_price,
                    quantity: 1
                });
            }

            this.total += product.sell_price;
        },
        inc: function(item){
            item.quantity++;
            this.total += item.sell_price;
        },
        dec: function(item){
            item.quantity--;
            this.total -= item.sell_price;
            if (item.quantity <= 0){
                var i = this.cart.indexOf(item);
                this.cart.splice(i, 1);
            }
        },
        removeFromCart: function(item){
            this.cart.splice(this.cart.indexOf(item), 1);
            this.total = this.total - (item.sell_price * item.quantity);
        },
        clearCart: function(){
            this.cart = [];
            this.total = 0;
            this.discount = 0;
        },
        payment: function(){
            this.cart = [];
            this.total = 0;
            this.discount = 0;
            alert('Transaction Completed');
        }
    },
    computed: {
        filteredProducts(){
            // var lowerTitle = product.title.toLowerCase();
            return this.products.filter((product) => {
                return product.name.toLowerCase().match(this.search);
            });
        }
    }
});
</script>

html

 <div class="col-md-3" v-for="product in filteredProducts" :key="product.id"> <!-- Inner-Col .// -->
                  <a href="#" @click.prevent="addToCart(product)">
                    <div class="box box-default pos-product-card"> <!-- /.box -->
                      <img class="card-img-top img-responsive" :src="product.image" alt="Card image cap">
                      <div class="box-body"> <!-- /.box-body -->
                        <h4 class="box-title">{{ product.name }}</h4>
                        <!-- <p class="box-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> -->
                        <button class="btn btn-info"><i class="fas fa-shopping-cart"></i></button>
                      </div> <!-- /.box-body -->
                    </div> <!-- /.box -->
                  </a>
                </div>
{% for category in categories %}
            <div class="tab-pane fade" id="category-{{category.id}}">

                <div class="row"> <!-- Inner-Row .// -->
                    {% for product in category.product_set.all %}
                   <div class="col-md-3" v-for="product in filteredProducts" :key="product.id"> <!-- Inner-Col .// -->
                  <a href="#" @click.prevent="addToCart(product)">
                    <div class="box box-default pos-product-card"> <!-- /.box -->
                      <img class="card-img-top img-responsive" :src="product.image" alt="Card image cap">
                      <div class="box-body"> <!-- /.box-body -->
                        <h4 class="box-title">{{ product.name }}</h4>
                        <!-- <p class="box-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> -->
                        <button class="btn btn-info"><i class="fas fa-shopping-cart"></i></button>
                      </div> <!-- /.box-body -->
                    </div> <!-- /.box -->
                  </a>
                </div>
                    {% endfor %}
     <table class="table table-hover text-center">
                                  <!-- <thead class="thead-dark"> -->
                                    <tr>
                                      <th>Item</th>
                                      <th>Quantity</th>
                                      <th>Rate</th>
                                      <th>Subtotal</th>
                                      <th>&nbsp;</th>
                                    </tr>
                                  <!-- </thead> -->
                                      <tr v-for="item in cart" :key="{{item.id}}">

                    <td><a href="#">{{ item.name }}</a></td>
                    <td><button class="btn btn-flat btn-xs btn-info p-1 mx-1" @click="inc(item.id)">+</button>[[ item.quantity ]]<button class="btn btn-flat p-1 mx-1 btn-xs btn-info" @click="dec(item.id)">-</button></td>
                    <td><span class="text-muted">{{ item.sell_price }}</span> </td>
                    <td>Rs {{ item.sell_price * item.quantity }}</td>
                    <td><button class="btn btn-xs btn-outline-primary" @click="removeFromCart(item)"><i class="fas fa-trash-alt"></i></button></td>
                  </tr>
                                  </table>
                                </div>
                                <div class="no-item-msg" v-if="cart.length === 0">No items in the cart.</div>
                              </div>
         <table class="table">
                                    <tr>
                      <td>Total Items</td>
                      <td>{{ cart.length }}</td>
                    </tr>
                    <tr>
                      <td>Total Amount</td>
                      <td>{{ total }}</td>
                    </tr>
                    <tr>
                      <td><span class="height-control">Discount (In Amount)</span></td>
                      <td><input type="number" v-model="discount" class="form-control"></td>
                    </tr>
                    <tr class="bg-dark">
                      <td>TO PAY</td>
                      <td>{{ total-discount }}</td>
                    </tr>

最佳答案

有几点供您考虑:

1. 似乎您的 html 中存在语法冲突，因为 Django 和 Vue.js 使用相同的 {{和 }}把变量。但是，由于 Django 将在 Vue 之前处理您的 html，因此它将替换

   ``` <h4 class="box-title">{{ product.name }}</h4>```
   

根据它将在上下文中找到的内容(服务器端的 Django tepmlate 上下文)。您可以在浏览器中检查源代码或您的页面，您可能会在那一行看到:

<h4 class="box-title"></h4>

因为它不会找到python product变量(你实际上是指 js(vue) 变量)。

解决方案:使用另一个 Vue 分隔符。参见 https://v2.vuejs.org/v2/api/#delimiters .例如使用 [[而不是 {{在 Vue 中:Vue 实例的一个选项 delimiters: ['[[', ']]'],并将该行(以及您指的 Vue 变量的其他行)更改为

<h4 class="box-title">[[ product.name ]]</h4>

1. 在 Vue 数据中，您没有 product.sell_price 变量，就像您做的那样

  {% for product in products %}
     {
      "id": {{product.id}},
      "name": "{{product.name}}",
      "image": "/media/{{product.image}}",
      "price": {{product.sell_price}}
      },
  {% endfor %}

你会得到product.price , 不是 product.sell_price在 Vue 中。或者你必须 将上面的行更改为 "sell_price": {{product.sell_price}}

1. 很快您就会遇到 item 的麻烦多变的。因为你有 item在 django 上下文中，而不是在 Vue 数据中。您应该像对 products 所做的那样将项目添加到 Vue 数据中.

2. 通常考虑将您的方法从混合 django 模板和 Vue 代码更改为:

• Django 将数据传递给 Vue
• Vue 生成所有 html 并执行您的 js 函数

或

• 使用Django Rest framework( https://www.django-rest-framework.org/ )提供rest API
• 仅在前端使用 Vue，从服务器加载数据并通过 REST 调用(例如使用 axios)将更改放入服务器

祝你好运。

关于javascript - 如何将 vue.js 与 django 集成？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56536911/