[Vuejs]-How to dynamic change vue component props in js

by

0👍

You can not do something like setVueProp, but you can always have a component with multiple props, but only pass some of the props based on your requirement.

If needed you can put validation on props, making few of the props mandatory while having other props as optional.

Vue.component('example', {
  props: {
    // basic type check (`null` means accept any type)
    propA: Number,
    // multiple possible types
    propB: [String, Number],
    // a required string
    propC: {
      type: String,
      required: true
    },
    // a number with default value
    propD: {
      type: Number,
      default: 100
    },
    // object/array defaults should be returned from a
    // factory function
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // custom validator function
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

You dont need to pass all the props to this component, but only where required is true are the ones need to be passed always.

0👍

You need to decide who is responsible for changing that. Given that it’s a property, I would say the parent should do it. You can add a :src data attribute to the parent and use that to change it.

Here’s an example:

<script src="https://cdn.bootcss.com/vue/2.1.8/vue.min.js"></script>

<div id="app"></div>

<script type="text/javascript">
window.addEventListener('load', function() {
  var webview = Vue.component("ro-weview", {
    props: ["src"],
    template: '<input type="text"  class="form-control" style="border-color: #ccc;outline: none; box-shadow: none !important; " :value="src"/><iframe :src="src"/></div>'
  })

  var myApp = new Vue({
    el: "#app",
    template: '<div id="app"><ro-weview :src="src"></ro-weview></div>',
    data: function() {
      return {
        src: 'http://www.google.com'
      }
    },
    methods: {
      setSrc: function(src) {
        this.src = src
      }
    },
    components: {
      'RoWebview': webview
    }
  })

    myApp.setSrc('http://www.bing.com')
})
</script>

-2👍

I only write js for my own app only run in latest chrome, so i can use es6 syntax, so I think following code is easy to understand, def relative class to put component relative functions

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="../node_modules/jquery/dist/jquery.js"></script>
  <script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <ro-webview id="wv" src="https://google.com"></ro-webview>
</div>

<script>
  (function () {
    Vue.component("ro-webview", {
      props: ["src"],
      template: `<iframe :src="src" target="_blank" style="width:100%;"/>`,
      mounted: function () {
        var thiz = this
        $(document).on("ro-wemedia.setSrc", function (e, v) {
          thiz.$set("src", v)
        })
      }
    })
  })()

  class RoWebview {
    constructor(selector) {
      this.selector = selector
    }

    setSrc(v) {
      $(this.selector).attr("src", v)
    }
  }

  new Vue({el: "#app"})
  new RoWebview("#wv").setSrc("http://bing.com")
</script>

</body>
</html>

Leave a comment