기본 Vue 도움말: 구성 요소의 JS 개체 값 액세스

기본 Vue 도움말: 구성 요소의 JS 개체 값 액세스

vue.js를 사용해 실험 중인데 라우팅 시 컴포넌트의 JS 객체 값에 액세스하는 데 어려움이 있습니다.

이 레포(https://github.com/johnayeni/filter-app-vue-js,)를 사용해, 기본적인 「제품 리스트」와 「제품 설명」앱을 복제하려고 하고 있습니다만, 동작하지 않습니다.Repo 홈페이지(Search Page)vue component)는 "제품 목록" 역할을 하며, 한 번에 하나의 항목만 표시하도록 "제품 설명" 구성 요소를 추가하려고 합니다.

사용자가 아이템으로 라우팅할 언어/프레임 중 하나를 클릭할 수 있도록 "description page" 컴포넌트("item.vue"라고 부릅니다)를 추가했습니다.vue: 특정 개체의 관련 정보(item.name, item.diag 등)만 표시하고 다른 언어는 표시하지 않습니다.

몇 가지 튜토리얼에 따라 다음과 같이 시도했습니다.

먼저 JS 객체(data/data.js에 있음)에 id:'1'을 추가했습니다.

const data = [
 {
    id: '1',
    name: 'vue js',
    logo: 'http://... .png',
    stack: [ 'framework', 'frontend', 'web', 'mobile' ],
 },
 {
    id: '2',
    name: 'react js',
    logo: 'http://... .png',
    stack: [ 'framework', 'frontend', 'web', 'mobile' ]
 },
...
];
export default data

다음으로 item.name (ItemCard.vue 내)를 라우터 링크태그로 랩했습니다.

<router-link :to="'/item/'+item.id"> {{ item.name}} </router-link>

다음으로 router/index.js에 새로운 경로를 추가했습니다.

{
path: './item/:id', 
component: item,
props: true
}

단, 이 라우터 링크를 클릭하면 ($route.params.id 경유로) .id에만 액세스할 수 있으며 .name이나 .dlink는 얻을 수 없습니다.다른 값(item.name, item.http 등)에 액세스하려면 어떻게 해야 합니까?내가 길을 잘못 가고 있는 것 같아.

당신의 도움에 감사 드립니다.

액세스 할 수 있는 유일한 이유는idURL 파라미터이기 때문입니다../item/:id.

여기에는 달성하려는 목표에 따라 몇 가지 옵션이 있습니다.

---

@dziraf에서 제안하는 바와 같이vuex스토어를 만들면 앱의 모든 데이터에 액세스할 수 있습니다.

export default {
  computed: {
    data() {
      return this.$store.data;
    }
  }
}

자세한 내용은 이쪽:https://vuex.vuejs.org/

---

또는 데이터를 Import하여 올바른 항목을 가져올 수도 있습니다.id:

import data from './data.js';

export default {
  computed: {
    data() {
      return data.find(d => d.id === this.$route.params.id);
    }
  }
}

네가 뭘 하려고 하는지에 따라 다르겠지

URL에서 원하는 아이템을 가져와 적절한 아이템을 렌더링하는 래퍼 컴포넌트만 있으면 될 것 같습니다.Item Wrapper를 예로 들어 보겠습니다.

<template>
  <item-card :item="item"></item-card>
</template>

<script>
import ItemCard from './ItemCard.vue';
import data from '../data/data';

export default {
  components: {
    ItemCard,
  },
  props: {
    stackNameUrl: {
      required: true,
      type: String,
    },
  },
  data() {
    return {
      item: {},
    }
  },
  computed: {
    stackName() {
      return decodeURI(this.stackNameUrl);
    }

  },
  created() {
    this.item = data.find( fw => fw.name === this.stackName);
  }
}
</script>

<style>

</style>

이 컴포넌트는 stack/fw name uri로 인코딩된 프로포트를 사용하여 디코딩하고 해당 문자열을 기반으로 데이터에서 fw를 검색하여 렌더링합니다.ItemCard itemfw "fw "로 설정합니다.

하려면 , 「」, 「」, 「」가 되도록 라우터를 설정할 필요가 ./item/vue js f.i.ItemWrapper js를 'vue js'로 하여stackNameUrl한 비트가 세팅이 .props★★★★★★★★★★★★★★★★★★:

import Vue from 'vue';
import Router from 'vue-router';
import SearchPage from '@/components/SearchPage';
import ItemWrapper from '@/components/ItemWrapper';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'SearchPage',
      component: SearchPage
    },
    {
      path: '/item/:stackNameUrl',
      name: 'ItemWrapper',
      component: ItemWrapper,
      props: true,
    },
  ]
});

, 그럼 해 볼까요?SearchPage.vue스택 박스가 링크로 기능하도록 합니다.★★★★

<!-- iterate data -->
      <item-card v-for="(item, index) in filteredData" :key="index" :item="item"></item-card>

현재 위치:

<template v-for="(item, index) in filteredData" >
  <router-link :to="'/item/' + item.name" :key="index">
    <item-card  :key="index" :item="item"></item-card>
  </router-link>
</template>

이제 모든 컴포넌트가 다음 링크에 배치됩니다.item/name.

그리고 voila.

몇 가지 고려 사항:

• :param부에에은 그것을 하여 '아까운'을하고 싶었다.ItemCard그 자체입니다.동작할 수만, 컴포넌트 「」로부터. 그런데 구성 요소에서 데이터에서 fw을 검색해야 할 것 일할 수 있었다.created() 카드 컴포넌트가 .와 연결됩니다.data.js 것은,수 되어 있기 에, 그 성분은 할 수고를 하다, 수고를 하다.itemParam보다 훨씬 이 같은 시나리오에 파일에서 데이터를 잡고 가다 낫다. ★★★★★★★★★★★★★★★★★★.ItemWrapper카드에 대한 정확한 프레임워크를 선택 홀로 남은 그런 종류의 요청을 만들었다.

• 때 사용자 나쁜 문자열뿐 아직도 사건 문의해야 합니다.

• 종심vuex 해결책을 가기 전에 뷰를 탐험하다Vuex지만 보통 불안정한 코드로, 지나치게 남용되고 있지 말아야 해 이어진다 대단하다.

언급URL:https://stackoverflow.com/questions/51733639/basic-vue-help-accessing-js-object-values-in-component