Использование Axios CDN для отображения в шаблоне Vue - PullRequest
Новая
       21

Использование Axios CDN для отображения в шаблоне Vue

0 голосов
/ 12 января 2019

Я хочу отображать информацию JSON, извлекаемую из библиотеки Axios. Используя мой {{ id }}, я хочу вызвать определенный параметр в запросе.

У меня есть внешний файл js. 

const Home = { 
    template: `

    <div class="user">
        <h2>user {{ id }}</h2>
        bet
    </div>

    `,
    props: {
        id: {
            type:    String,
            default: 'N/A'
        }
    } 
}

CDN включает в себя: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="../../jobs/job.js"></script>

Маршрутизатор довольно прост: 

const router = new VueRouter({
        mode: 'history',
        routes: [
            {
                path: '/jobs/:id?',
                component: Home,
                props:     true
            },
        ],
    })

СПАСИБО

1 Ответ

0 голосов
/ 12 января 2019

Неясно, является ли ID свойством или параметром маршрута. Я думаю, что вы используете параметр маршрута здесь. Если это так, и вы не передаете его непосредственно в компонент, то я думаю, что вы можете безопасно удалить его и заменить его вычисленным свойством, которое будет возвращать идентификатор. Затем просто добавьте method, который будет выполнять ваш запрос axios. И вызовите этот запрос в методе mounted вашего компонента.

Мои мысли: 

const Home = { 
  template: `

  <div class="user">
    <h2>user {{ id }}</h2>
    bet
  </div>

  `,
  mounted: function() {
    this.myRequest()
  }, 
  computed: {
    id: {
      get: function() {
        return this.$route.params.id
      }
    }
  },
  methods: {
    myRequest() {
      axios.get('/path/to/my/request', { params: { id: id }})
        .then(response => {
          console.log(response)
        }).catch(error => {
          console.log(response)
        })
    }
  }
}
...