Как я могу генерировать уникальные идентификаторы в Vue.js из атрибутов в файле JSON? - PullRequest
Новая
       9

Как я могу генерировать уникальные идентификаторы в Vue.js из атрибутов в файле JSON?

0 голосов
/ 01 декабря 2018

Я использую Vue.js для генерации div, и я хотел бы использовать для этого данные из файла JSON.

Это не обязательно должно быть из JSON, но это было бы предпочтительнее, мне просто нужно создать уникальный идентификатор для каждого экземпляра div в html ниже.

Что такоелучший способ создать уникальные идентификаторы для каждого из divs?

HTML 

 <ul>
    <li v-for="(member, index) in cyclists" :key="index" class="col-md-4 inview fromBottomIn" data-in="fromBottomIn" data-out="fromBottomOut">
        <div class="cycling__card">
            <div class="cycling__rider-container">
                <span class="cyclist__name">{{member.name}}</span>
            </div>

            <!-- Need to add id's to the div below -->
            <div id={{member.name}}>
            </div>

        </div>                                      
    </li>
</ul>

JSON 

  "cyclists": [
    {
      "name": "Jason",
      "position": "CEO",
    },
    {
      "name": "Mike",
      "position": "Digital Strategist",
    },
    {
      "name": "Tom",
      "position": "Vice President, Product Management",
    },
    {
      "name": "Jeff",
      "position": "Senior Director, Creative",
    },
}

Ответы [ 3 ]

0 голосов
/ 01 декабря 2018

Если вы не хотите загружать дополнительный модуль, такой как vue-uuid, вы можете использовать эту функцию для генерации хэша результата строкового преобразования каждого объекта массива в предположении, что каждое имя / позиция будет уникальным.

Я использовал этот ответ Stackoverflow в качестве основы для этого. 

const data = [{"name":"Jason","position":"CEO"},{"name":"Mike","position":"Digital Strategist"},{"name":"Tom","position":"Vice President, Product Management"},{"name":"Jeff","position":"Senior Director, Creative"}];

function genHash(str) {
  var hash = 0, i, chr;
  if (str.length === 0) return hash;
  for (i = 0; i < str.length; i++) {
    chr   = str.charCodeAt(i);
    hash  = ((hash << 5) - hash) + chr;
    hash |= 0;
  }
  return hash;
};

// For each object in the array create
// a stringyfied version of it and create
// a hash
data.forEach(obj => {
  obj.id = genHash(JSON.stringify(obj));
});

console.log(data);

Затем вы можете зациклить данные, как обычно.

0 голосов
/ 01 декабря 2018

Существуют разные подходы.

  1. Используйте индекс.У вас есть массив, поэтому просто используйте индекс, из которого они получены, с добавлением чего-то уникального для объекта.cyclist_1, cyclist_2 ...
  2. Поместите идентификаторы в JSON как часть данных.
  3. Получите их из имеющихся у вас данных.С хешем или просто объединением имени + позиции.Используйте некоторую функцию для его очистки (удаление пробелов, недопустимых HTML-символов и т. Д.)

  4. Создайте uuid для каждого на лету.Вы можете использовать эту удивительную функцию для uuid версии 4 , разработанной сообществом , чтобы быть максимально короткой: 

    function b(a){return a?(a^Math.random()*16>>a/4).toString(16):([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,b)}
0 голосов
/ 01 декабря 2018

Я в этом случае использую uuid , вам нужно будет объединить данные JSON с другим объектом с новым идентификатором, поэтому пример: 

<script>
  import { uuid } from 'vue-uuid'; 

  export default {
    data() {
      return {
        uuid: uuid.v1(),
        id: null 
      }
    },
    computed: {
      newCyclists: function () {
       const id = this.id;
       const newID = this.$uuid.v4();
       return {
          ...cyclists,
          id: newID,
        }
      }
    }
  };
</script>

в computedоператор распространения для объединения нового идентификатора с текущими данными JSON с новым идентификатором, vue-uuid взят из библиотеки uuid , а v4 связан с генерацией идентификаторов

...