2017-08-02 144 views
0

我是vue js的新手,缺少傳遞組件prop。
嘗試使vue-slider-component example垂直。vue js vue-slider-component如何更新道具

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

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

失敗了,我應該怎麼通過道具組件的例子嗎?

編輯:
試了一下建議中的註釋:

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

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

回答

2

你應該通過值作爲字符串是這樣的:

<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>

+1

作品像魅力&根據文件傳遞字符串是我錯過了! TY – user2495766

0

你後的答案就是神奇的

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

我不是當然,如果這可以通過道具完成......我並不是所有熟悉vue-js的人對不起,跳開槍的答案。 =)

更簡潔。自定義類添加到您的滑塊和相應的應用旋轉(讓你不轉你整個應用=)

+0

雖然我明白你寫的是[support],它已經在[道具](https://github.com/NightCatSama/vue-slider-component#道具)第一排 - 方向。我正在跳着使用那個。 – user2495766

+0

我以前看過的時候看過。我搞砸了你的小提琴,唯一的辦法,我可以使它的工作是通過使用CSS ...對不起回合。 – archae0pteryx

+0

在反應中,我們使用括號來傳遞一些prop值。嘗試= {true}到你的垂直道具? – archae0pteryx