Получить объект JSON, который соответствует определенному значению

Question

Я создаю небольшое веб-приложение для практики и изучения Vue.js и работы с API.

Для конкретной проблемы, которую я хочу решить, я хотел бы вернуть объект, который имеет соответствующий uuid, который я запрашиваю.

С моими текущими знаниями я понимаю, что могу сделать это, реализовав логику некоторых видов и циклов.

Однако я все еще новичок в JS, Vue.js, поэтому я не уверен, есть ли лучший способ приблизиться к этому.

Есть ли встроенная функция или какая-то форма "наилучшей практики" для этого?

methods: {
    fetchItem(row) {
        // row.target_uuid  -- this is the UUID I want
        // this.$props.todoItems;   -- this contains the json objects
        // return this.$props.todoItems[i] where this.$props.todoItems[i]['uuid'] == row.target_uuid
},

Это фрагмент моих $ props.todoItems для контекста

[
  {
    "title": "Install Maris",
    "uuid": "9ec9ea6b-0efc-4f6a-be2e-143be5748d3a",
    "field_completed": "False"
  },
  {
    "title": "Figure out why VS Code sucks",
    "uuid": "85120da5-ee59-4947-a40f-648699365c73",
    "field_completed": "False"
  },
  {
    "title": "Start designing portfolio",
    "uuid": "243c1960-7ade-4a68-9a74-0ccc4afa3e36",
    "field_completed": "False"
  },
  {
    "title": "Meal Prep",
    "uuid": "85b64b18-9110-44d8-bd2d-8f818b0a810f",
    "field_completed": "False"
  },
  {
    "title": "Sharpen knives",
    "uuid": "8a7ac5f6-8180-4f20-b886-628fd3bcfc85",
    "field_completed": "False"
  },
  {
    "title": "Set up SSH keys",
    "uuid": "f879c441-8c05-4f24-9226-125c62576297",
    "field_completed": "False"
  }
]

Answer 1

Если вы знаете, что ищете ровно один элемент (или первый соответствующий элемент), вам следует более подробно рассмотреть метод Array.find(), предоставленный JS. (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)
Также взгляните на все другие методы, которые предоставляет прототип Array, большинство из них довольно наглядны и решают большинство основных проблем, с которыми вы столкнетесь.

Чтобы использовать это в своем приложении Vue, у вас может быть метод, который возвращает ваше задание на основе предоставленного идентификатора, подобного этому

todoByUid(uidToFind) {
  return this.todos.find(todo => todo.uid == uidToFind)
}

Если вы заботитесь только о текущем выбранном элементе, то вычисленное значение, как упомянул Джейкоб, - это путь:

computed() {
  selectedTodo() {
    return this.todos.find(todo => todo.uid == this.selectedUid)
  }
}