CODEWITHSUNDEEP
javascriptvuejs2vue-component
user2495766
user2495766

Reputation: 123

vue js vue-slider-component how to update props

I'm new to vue js and missing passing components prop.
Trying to make the vue-slider-component example to be vertical. 

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

and

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

failed, how should I pass props to component in the example?

Edit:
Tried what was suggested in comments:

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

and

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

Upvotes: 1

Views: 3722

Answers (2)

choasia
choasia

Reputation: 10852

You should pass the value as string like this:

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

See the sample 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>

Upvotes: 5

rimraf
rimraf

Reputation: 4126

The answer you're after is the magical

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

i'm not sure if this can be done via props... i'm honestly not all that familiar with vue-js so sorry to jump the gun on the answer. =)

to be more concise. Add a custom class to your slider and apply the rotate accordingly (so that you're not rotating you entire app =)

Upvotes: 0

Related Questions