vue js vue-slider-component 如何更新道具答案

【问题标题】：vue js vue-slider-component how to update propsvue js vue-slider-component 如何更新道具
【发布时间】：2018-01-10 06:08:49
【问题描述】：

我是 vue js 的新手，缺少传递组件 prop。
试图使 vue-slider-component example 垂直。

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

和

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

失败了，我应该如何将道具传递给示例中的组件？

编辑：
尝试了 cmets 中的建议：

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

和

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

【问题讨论】：

标签： javascript vuejs2 vue-component

【解决方案1】：

你应该像这样将值作为字符串传递：

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

查看示例here

new Vue( {
  el: '#app',
  data () {
    return {
    }
  },

  methods: {
  },
  mounted () {
  },
  components: {
    'vueSlider': window[ 'vue-slider-component' ],
  }
})

#app {
  margin: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<script src="https://nightcatsama.github.io/vue-slider-component/dist/index.js"></script>
<div id="app">
  <vue-slider :direction="'vertical'" :height="100" :width="6"></vue-slider>
</div>

【讨论】：

像魅力一样工作，根据文档，字符串传递是我错过的！ TY

【解决方案2】：

你所追求的答案是神奇的

#app {
  transform: rotate(90deg);
}

我不确定这是否可以通过道具来完成......老实说，我对 vue-js 不是很熟悉，所以很抱歉在回答问题上一头雾水。 =)

更简洁。向您的滑块添加一个自定义类并相应地应用旋转（这样您就不会旋转整个应用程序=）

【讨论】：

虽然我确实理解您写的内容，但在第一行 - 方向下的 [props] (github.com/NightCatSama/vue-slider-component#props) 中已经对此提供了支持。我想用那个。
我之前看的时候确实看到了。我弄乱了你的小提琴，我能让它工作的唯一方法是使用 css ......对不起。
在 react 中，我们使用括号来传递一些 prop 值。尝试 ={true} 到您的 vert 道具？
对不起。方向={垂直}
我现在在用手机，否则我会试一试