标签: vue-component

我有2个组件:

Vue.component('repo-button', {
  props:["check_in_id", "repo_id"],
  template: '#repo-button',
  methods: {
    fetchRepo: function() {
        url = window.location.href.split("#")[0] + "/check_ins/" + this.check_in_id + "/repositionings/" + this.repo_id + ".json"
        cl(url)
        cl(this)
        var that;
        that = this;

        $.ajax({
            url: url,
            success: function(data) {
                cl(data)
                that.showRepo();
            }
        })

    },
    showRepo: function() {
        // what do I put here to display the modal 
    }
  },
  data: function() {
  var that = this;
  return {

  }
}
});

Vue.component('repo-modal', {
    template: "#repo-modal",
    data: function() {
        return {
            status: …

我的Vue组件是这样的：

<template>
    <div class="modal" tabindex="-1" role="dialog">
         <form method="post" :action="baseUrl+'/product/edit'">
            ...
            <input type="hidden" name="product_id" value="{{productId}}">
            ...
         </form>
    </div>
</template>

<script>
    export default {
        props:['productId'],
        ...
    }
</script>

存在这样的错误：

value =“ {{productId}}”：属性内插已删除。

我怎么解决这个问题？

我是vue js的新手，并且缺少传递组件的道具。
尝试使vue-slider-component 示例垂直。

<vue-slider direction=vertical ></vue-slider> 

和

<vue-slider :direction=vertical ></vue-slider>

失败，如何在示例中将props传递给组件？

编辑：
尝试了注释中建议的内容：

<vue-slider direction={vertical} ></vue-slider> 

和

<vue-slider :direction={vertical} ></vue-slider>

基于官方示例Custom Input Component示例:

HTML:

<div id="app" >
  <div :class="{'has-value' : hasValue}">
    <input type="text"
      ref="input"
      v-bind:value="value"
      @input="onInput" >
  </div>
</div>

JS:

new Vue({
  el: '#app',
  data: function() {
    return {
      hasValue: false
      }
  },
  props: ['value'],
  methods:{
  onInput: function(){
    val= this.$refs.input.value
      if(val && val.length > 0){
        this.hasValue = true
      } else {
        this.hasValue = false
      }
    }
  }
})

JS小提琴演奏

预期: 动态设置hasValue输入数据并将Css类绑定到此数据

意外: 只有在初始化并键入第一个字符后,才会从输入中删除键入的字符.按JS-Fiddle-> Run再次查看.

在第一个字符后,一切都按预期工作

如果我删除v-bind:value="value"或评论\\this.hasValue = true它按预期工作.对于自定义输入组件,建议使用绑定值prop.

这是为了什么？为什么？或者这是我应该报告的错误？

我假设我有以下数据

data() {
    return {
        users: [
            {country: 'USA', name: 'Taylor'},
            {country: 'UK', name: 'Tony'},
            {country: 'USA', name: 'Mary'},
            {country: 'JAPAN', name: 'Jane'},
            {country: 'JAPAN', name: 'Moses'},
            // More users from different countries in the world
        ]
    }
}

我想按国家分组,我的最终表结构是这样的,按国家名称desc排序.

<table>
    <tr>
        <th>Country</th>
        <th>User</th>
    </tr>
    <tr>
        <td colspan="2">USA</td>
    </tr>
    <tr>
        <td></td>
        <td>Taylor</td>
    </tr>
    <tr>
        <td></td>
        <td>Mary</td>
    </tr>
    <tr>
        <td colspan="2">UK</td>
    </tr>
    <tr>
        <td></td>
        <td>Tony</td>
    </tr>
    <tr>
        <td colspan="2">JAPAN</td>
    </tr>
    <tr>
        <td></td>
        <td>Jane</td>
    </tr>
    <tr>
        <td></td>
        <td>Moses</td>
    </tr>


</table>

我怎样才能做到这一点？我试过和Lodash的小组一起玩,但是无法实现它

let …

是否可以预先设置选择框的选定值？

使用Vue(v2),我试图在Vue模板中创建这样的选择框.

<select v-model="selectedFlavor">
   <option v-for="flavor in flavors" 
           :value="flavor"
           :selected="selectedFlavor == flavor">{{ flavor }}</option>
</select>

和这样的组件:

Vue.component('flavor-pane', {
      ...
      data: function() {
          selectedFlavor: 'strawberry',
          flavors: ['blueberry', 'lime', 'strawberry'],
      });
}

本质上,我的想法是我需要遍历一个简单的数组,在选择框中创建几个选项,并将选择框的值设置为现有值.我可以这样做吗？

我的模板/组件渲染得很好,但selected即使符合条件并且在选择框中没有选择任何值,该属性似乎也不会出现在HTML中.

我正在努力学习Vue并遇到了这个问题.

Vue.component('alert', {
  props: ['type', 'bold', 'msg'], template: '<div class="alert alert-{{ type }}" role="alert"><b>{{ bold }}</b> {{ msg }}</div>'
});

var componentProps=new Vue( {
    el: '#app',
  }

);

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div id="app" class="container">
  <alert type="info" bold="Greetings." msg="This is some information."></alert>
  <alert type="warning" bold="Slow down." msg="You might crash."></alert>
  <alert type="danger" bold="Oh no!" msg="The program just crashed!"></alert>
  <alert type="success" bold="Rock Out" msg="with your Props out!"></alert>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

这是在检查员的输出中.你可以看到道具[类型]没有改变.

<div role="alert" class="alert alert-{{ type }}'"><b>Slow down.</b> You might crash.</div> …

我有一个包含两个必需道具的组件.单元测试失败,因为我收到以下错误:

  console.error node_modules\vue\dist\vue.runtime.common.js:589
    [Vue warn]: Missing required prop: "heading"

    (found in <Root>)

  console.error node_modules\vue\dist\vue.runtime.common.js:589
    [Vue warn]: Missing required prop: "subHeading"

    (found in <Root>)

  console.error node_modules\vue\dist\vue.runtime.common.js:589
    [Vue warn]: Missing required prop: "heading"

    (found in <Root>)

  console.error node_modules\vue\dist\vue.runtime.common.js:589
    [Vue warn]: Missing required prop: "subHeading"

组件来源:

<template>
    <div class="level-item has-text-centered">
        <div>
            <p class="heading">{{ heading }}</p>
            <p class="title">{{ subHeading }}</p>
        </div>
    </div>
</template>

<script>
export default {
    name: 'StatisticsBannerItem',
    props: {
        heading: {
            required: true
        },
        subHeading: {
            required: true
        }
    }
};
</script> …

我正在尝试通过添加类来单击它时使导航处于活动状态nav-selected.我已经看到过这样的其他问题,但它们是相关的,v-model因此它们没有帮助我.

我需要确保将它添加到商店中,以便即使刷新后我也能始终看到哪个页面处于活动状态.但是我收到以下错误:

Navigation.vue:

    <template>
    <v-container>
        <v-layout align-center>
            <!-- Logo -->
            <v-flex sm2>
                <img src="http://beam.space/img/icon.png" height="30px">
            </v-flex>
            <!-- Navigation -->
            <v-flex sm8>
                <v-layout wrap justify-center>
                    <v-flex sm2>
                        <router-link to="/myspaces">
                            <h2 @click="setActiveNav(0)" :class="{'nav-selected': activeNavigation === 0}" class="nav-text">My Spaces</h2>
                        </router-link>

                    </v-flex>

                    <v-flex sm2>
                        <router-link to="/inspirations">
                            <h2 @click="setActiveNav(1)" :class="{'nav-selected': activeNavigation === 1}" class="nav-text">Inspirations</h2>
                        </router-link>
                    </v-flex>
                </v-layout>
            </v-flex>
            <v-flex sm2>
                <p>profile</p>
            </v-flex>
        </v-layout>
    </v-container>
</template>

<script>
    import { mapState } from 'vuex';

    export default {
        name: "navigation",
        computed: {
            ...mapState([
                'activeNavigation' …

是否有可能在单独的.js文件中编写方法，数据，计算等。然后将它们导入component.vue文件中？

我不会将所有js逻辑都放在一个.vue组件中。

对于每个组件，我都希望以这种方式组织代码：

myComponent/
      component.vue
      methods.js
      data.js
      computed.js
      etc..

然后在component.vue中：

methods: ()=> from './methods.js'

我只是尝试了模块导出，但没有用