Сохранение позиции элементов в компоненте Sortable - PullRequest
Новая
       20

Сохранение позиции элементов в компоненте Sortable

0 голосов
/ 22 июня 2019

Я использую UIKit (GetUIKit) в Vue.js.У меня есть 3 списка объектов (id, изображение), которые я перетаскиваю.Я хотел бы сохранить положение изображений в каждом списке, но массивы, кажется, не изменились, и я не знаю, как найти, в какой массив они были добавлены.

<template>
  <div class="uk-child-width-1-4@s" uk-grid>
    <div>
      <h4>Selected products</h4>
      <div
        uk-sortable="group: sortable-group"
        v-for="product in selectedProducts"
        v-bind:key="product.id"
        v-on:stop="greet(product.id, selectedProducts, outfit1, outfit2)"
      >
        <div class="uk-card uk-card-small uk-card-default uk-card-body">
          <img v-bind:src="product.image">
        </div>
      </div>
    </div>

    <div>
      <h4>Outfit 1</h4>
      <div
        uk-sortable="group: sortable-group"
        v-for="product in outfit1"
        v-bind:key="product.id"
        v-on:stop="greet(product.id, selectedProducts, outfit1, outfit2)
      >
        <div class="uk-card uk-card-small uk-card-default uk-card-body">
          <img v-bind:src="product.image">
        </div>
      </div>
    </div>

    <div>
      <h4>Outfit 2</h4>
      <div
        uk-sortable="group: sortable-group"
        v-for="product in outfit2"
        v-bind:key="product.id"
        v-on:stop="greet(product.id, selectedProducts, outfit1, outfit2)"
      >
        <div class="uk-card uk-card-small uk-card-default uk-card-body">
          <img v-bind:src="product.image">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedProducts: [
        {
          id: 1,
          name: "Cool top",
          image:
            "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfpwfhIA_q8BvD5Hj6TKHfTd0fhfaNQcYKPlBcww6aZXWUOE3R"
        },
        {
          id: 2,
          name: "Fun jeans",
          image:
            "https://wwws.dior.com/couture/ecommerce/media/catalog/product/cache/1/grid_image_8/460x497/17f82f742ffe127f42dca9de82fb58b1/U/d/1550571393_922P02A3932_X5846_E08_GH.jpg"
        }
      ],
      outfit1: [
        {
          id: 3,
          name: "shoes",
          image: "https://images.vans.com/is/image/Vans/D3HY28-HERO?$583x583$"
        }
      ],
      outfit2: [
        {
          id: 4,
          name: "scarf",
          image:
            "https://www.brontebymoon.co.uk/wp-content/uploads/2017/04/TAR80-A01-Lambswool-Tartan-Scarf-Antique-Dress-Stewart.jpg"
        }
      ]
    };
  },
  methods: {
    greet: function(position, ) {
      // This is where I want to save the position, for ex: {outfit1: [id: 1,2], outfit2: [id: 3], selectedProduct: [id: 4]}
      console.log(position);
    }
  }
};
</script>

Я хочу сохранить позицию, например: {outfit1: [id: 1,2], outfit2: [id: 3], selectedProduct: [id: 4]}, но я застрял.Есть идеи?

Спасибо!

...