Почему Vue не хочет отображать массив?

Question

[Nurseit Sharip]

Делаю корзину товаров. Вроде бы все норм, но не отображается нужный массив. Vue devtools показывает что все сделано, все добавлено.

Есть товары:

<v-layout
                  xs12
                  class="on_cart_flex elevation-2 mt-2"
                  v-for='product in products'
                  track-by="id"
                >
                  <v-flex
                    :style='{ background: "url(" + "http://192.168.1.116:8000" + product.pic + ")" }'
                    xs4
                    class="cart_pic"
                  ></v-flex>
                  <v-flex xs7>
                    <v-flex
                      xs12
                      class="pl-2 pt-2"
                      style="position: revalive"
                    >

                      <v-flex
                        class="pl-2 pt-2"
                        xs12
                      >
                        <strong>
                          <p class="without_padding">{{ product.name }}</p>
                        </strong>
                      </v-flex>
                      <v-flex
                        class="pl-2 pt-1"
                        xs12
                      >
                        <p class="without_padding">{{ product.desc }}</p>
                      </v-flex>
                    </v-flex>
                    <v-flex
                      class="pl-2"
                      xs12
                    >
                      <v-btn
                        flat
                        small
                        style="color: black; font-align: left;"
                        color="teal darken-1"
                        @click="addToCart(product)"
                      >В корзину&nbsp;
                        <v-icon small>add_shopping_cart</v-icon>
                      </v-btn>
                      <v-btn
                        flat
                        small
                        style="color: black; font-align: left;"
                        color="teal darken-1"
                        @click="info_dialog = true"
                      >Подробнее&nbsp;
                        <v-icon small>info_outline</v-icon>
                      </v-btn>
                      <h3 style="positon: absolute; bottom: 0px; right: 0px; text-align: left; height: 100%">
                        <span style="padding-left: 10px;">{{ product.price }} тг</span>
                      </h3>
                    </v-flex>
                  </v-flex>
                </v-layout>

Во Vuex все происходит вот так:

export default new Vuex.Store({
  state: {
    added: [],
    all: json.goods
  },
  mutations: {
    [types.ADD_TO_CART](state, {
      id
    }) {
      const record = state.added.find(p => p.id === id)
      if (!record) {
        state.added.push({
          id,
          quantity: 1
        })
      } else {
        record.quantity++
      }
    }
  },
  actions: {
    addToCart({
      commit
    }, product) {
      commit(types.ADD_TO_CART, {
        id: product.id
      })
    }
  },
  getters: {
    allProducts: state => state.all,
    getNumberOfProducts: state => (state.all ? state.all.length : 0),
    cartProducts: state => {
      return state.added.map(({
        id,
        quantity
      }) => {
        const product = state.all.find(p => p.id === id)

        return {
          name: product.name,
          price: product.price,
          pic: product.pic,
          desc: product.desc,
          id,
          quantity
        }
      })
    }
  }
})

Все как нужно взял с vuex и расставил по местам:

computed: {
    // filteredList: function() {
    //   return this.carts.filter(cart => {
    //     return cart.name.toLowerCase().includes(this.search.toLowerCase());
    //   });
    // }
    ...mapGetters({
      products: "allProducts",
      length: "getNumberOfProducts",
      productsInCart: "cartProducts" 
    }),
    total() {
      return this.productsInCart.reduce((total, p) => {
        return total + p.price * p.quantity;
      }, 0);
    }
  }

Но господин productsInCart не хочет показывать массив:

<p v-show="!productsInCart.length">
                <i>В корзине пока ничего!</i>
              </p>
              <v-card
                tile
                flat
                class="pa-2 cart transperent_back"
                inline-template
              >
                <v-layout
                  xs12
                  class="on_cart_flex elevation-2 mt-2"
                  v-for='p in productsInCart'
                >
                  <v-flex
                    :style='{ background: "url(" + "http://192.168.1.116:8000" + p.pic + ")" }'
                    xs4
                    class="cart_pic"
                  ></v-flex>
                  <v-flex xs7>
                    <v-flex
                      xs12
                      class="pl-2 pt-2"
                      style="position: revalive"
                    >

                      <v-flex
                        class="pl-2 pt-2"
                        xs12
                      >
                        <strong>
                          <p class="without_padding">{{ p.name }}</p>
                        </strong>
                      </v-flex>
                      <v-flex
                        class="pl-2 pt-1"
                        xs12
                      >
                        <p class="without_padding">{{ p.desc }}</p>
                      </v-flex>
                    </v-flex>
                    <v-flex
                      class="pl-2"
                      xs12
                    >
                      <v-flex xs3>
                        <v-text-field
                          v-model="this.quantity"
                          class="mt-0"
                          type="number"
                          min="1"
                        ></v-text-field>
                      </v-flex>
                      <v-flex
                        xs9
                        style="float: left"
                      >
                        <v-btn
                          flat
                          small
                          style="color: black; text-align: left; float: left"
                          color="teal darken-1"
                          @click="info_dialog = true"
                        >Подробнее&nbsp;
                          <v-icon small>info_outline</v-icon>
                        </v-btn>
                      </v-flex>
                    </v-flex>
                  </v-flex>
                  <!-- <tr>
                    <td><b>Total:</b></td>
                    <td></td>
                    <td><b>${{ total }}</b></td>
                  </tr> -->
                  <!-- <p><button
                      v-show="productsInCart.length"
                      class='button is-primary'
                      @click='checkout'
                    >Checkout</button></p> -->
                </v-layout>

В DevTools на его месте комментарий вот такой:

А в Vue DevTools все происходит все как нужно:


Почему так?

Answer 1

[0xD34F]

Компоненту v-card, в котором вы пытаетесь выводить товары, вы добавили атрибут inline-template, вследствие чего внутреннее содержимое будет использовано в качестве шаблона, а не передано в слот. А у вас там используется v-for, в то время как корневой элемент должен быть ровно один. Либо добавьте ещё какую-то обёртку v-layout'ам, либо уберите inline-template.

Comments

[Nurseit Sharip]

Попробывал и тот и тот вариант, нету результата, спасибо за ответ

[0xD34F]

Nurseit Sharip, ну, попробуйте воспроизвести свою ситуацию в песочнице - пытаться угадать, что у вас ещё может быть не так, я не намерен.

[Nurseit Sharip]

0xD34F, ok