Question

我正在使用Vue应用程序，其中我的初始视图（projects.vue）以摘要形式呈现对象数组（使用v-for循环）;每个对象的摘要都有一个按钮链接到一个＆＃39;详细信息＆＃39;观点＆amp;和＆＃39;编辑＆＃39;视图;链接使用对象属性（id）来选择/呈现相应的详细信息视图，这很好。现在，由于这些链接将出现在其他几个视图中，我创建了一个buttons.vue组件并将其导入到projects.vue中，但这样他们就没有获取ID，并且尽管有一些关于组件和道具我还没想到如何实现这个看似简单的功能。我的组件：

projects.vue（这有效;请注意使用＆＃39; project.id＆＃39;）：

<template>
    <ol class="projects">
        <li class="project" v-for="(project, ix) in projects">
            <!— SNIP: some html showing the project summary  —>
            <!--
                my objective is to replace the following with
                <app-buttons></app-buttons>
            -->
            <div class="buttons">
                <router-link class="button" v-bind:to="'/project-detail/' + project.id">details</router-link>
                <router-link class="button" v-bind:to="'/project-edit/' + project.id">edit</router-link>
            </div><!-- END .buttons -->
        </li>
    </ol>
</template>


<script>

    export default {
        components: {
            'app-buttons': Buttons
        },
        data () {
            return {
                projects: [],
                search: "",
                projectID: ""
            }
        }, // data
        methods: {
        }, // methods
        created: function() {
            this.$http.get('https://xyz.firebaseio.com/projects.json')
            .then(function(data){
                return data.json();
            }).then(function(data){
                var projectsArray = [];
                for (let key in data) {
                    data[key].id = key; // add key to each object
                    this.projectID = key;
                    projectsArray.push(data[key]);
                }
                this.projects = projectsArray;
            })
        }, // created
        computed: {
        }, // computed
    } // export default
</script>

buttons.vue：

<template>
    <div class="buttons">

        <router-link class="button" v-bind:to="'/project-detail/' + projectID">details</router-link>
        <router-link class="button" v-bind:to="'/project-edit/' + projectID">edit</router-link>

    </div><!-- END .buttons -->
</template>

<script>

   export default {
        props: [ "projectID" ],
      data() {
         return {
         }
        },
        methods: {}
   }
</script>

Answer 1

curl --header "Authorization: ***" -F "photo=@flower.jpg" -F metadata='{"file_size":879394}' http://***/v1/media_photos然后在你的组件中，

#%RAML 1.0
title: test

/media_photos:
  post:
    description: Send Receipt with additional information
    headers:
      Authorization:
        description: Authorization header. Will be implemented(changed)     further.
        required: true
        example: K7ny27JTpKVsTgdyLdDfmQQWVLERj2zAK5BslRsqyw
    body:
      metadata: // not valid
        application/json:
          properties:
            file_size:
              type: integer
              example: 879394
              required: true
      photo: //not valid
        multipart/form-data:
          properties:
            file:
              description: Upload file
              type: file
              required: true

应在<app-buttons :projectId="foo"></app-buttons>代码中显示您的项目ID。

Vue.js：如何在子组件的循环中访问对象的属性值

1 个答案: