vue.js - 如何在不通过 div 的情况下正确访问 vue.js 中的 props

Question

我在我的 vue 根目录的 create 钩子中执行了一个 api 调用。然后我有一个组件试图使用从 api 调用返回的数据。

我的问题很简单。下面的示例有效，但有没有办法<stage-execs></stage-execs>不传入 job_execs = job_execs ？

我更喜欢使用更简洁的外观<stage-execs></stage-execs>

    <div id="vue-job">
    <div class="column">
        <div class="row">
            <stage-execs v-bind:job_execs=job_execs></stage-execs>
        <br><br>
    </div>
    </div>


<script>
    Vue.component('stage-execs', {
        delimiters: [ '[[', ']]' ],
        props: ['job_execs'],
        template: `
        <ul id="example-1">
          <h3>Stages</h3>
          <li v-for="item in this.job_execs">
            [[ item.build_id ]]
          </li>
        </ul>
        `,

var v_root = new Vue({
    delimiters: [ '[[', ']]' ],
    el: '#vue-job',
    data: {
        job_execs: []
    },
    created() {
        url="http://{{ api_endpoint }}"
        fetch(url)
            .then(response => response.json())
            .then(body => {
                for(i=0; i<body.length; i++){
                    this.job_execs.push({
                        'build_id': JSON.stringify(body[i].build_id),
                        'status': JSON.stringify(body[i].status.name),
                    })
                }
        })
        .catch( err => {
            console.log('Error Fetching:', url, err);
            return { 'failure': url, 'reason': err };
        });

    },
});

标签： vue.js

Answer 1

不，你不能。你能做的最好的就是失去v-bind，所以:job_execs=job_execs。（the:是 v-bind 的简写）