Strategies for dynamically altering Vue component props using JavaScript

Question

Strategies for dynamically altering Vue component props using JavaScript

for instance:

<body>
<div id="app">
  <ro-weview id="wv" src="http://google.com"></ro-weview>
</div>

<script>
  (function () {
    Vue.component("ro-webview", {
      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>`
    })
  })()

  new Vue({el: "#app"})

  setVueProp("#wv", "src", "http://bing.com")
</script>

</body>

I am seeking to use #setVueProp to change the ro-webview src, how can I achieve this? I understand that by using JavaScript, I can access an iframe and change its src, but my goal is to alter the prop for the ro-webview instance.

javascript vue.js

Answer 1

Answer №1

You must determine the party responsible for making that change. Considering it is a property, I believe the parent should take care of it. You can assign a :src data attribute to the parent element and utilize it for making changes.

Check out this 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>

Answer 2

You must determine the party responsible for making that change. Considering it is a property, I believe the parent should take care of it. You can assign a :src data attribute to the parent element and utilize it for making changes.

Check out this 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>

Answer 3

Answer №2

Instead of using a function like setVueProp, you can create a component with multiple props and only pass the necessary props based on your specific requirements.

If necessary, you can add validation to the props, making some props mandatory while leaving others 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 are not obligated to provide all props when using this component, only the ones marked as required must always be passed.

Answer 4

Instead of using a function like setVueProp, you can create a component with multiple props and only pass the necessary props based on your specific requirements.

If necessary, you can add validation to the props, making some props mandatory while leaving others 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 are not obligated to provide all props when using this component, only the ones marked as required must always be passed.

Answer 5

Answer №3

For my personal app, I exclusively write JavaScript code that runs on the latest version of Chrome, allowing me to utilize ES6 syntax. The code below is designed for easy comprehension and defines a relative class for organizing component-related 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>

Answer 6

For my personal app, I exclusively write JavaScript code that runs on the latest version of Chrome, allowing me to utilize ES6 syntax. The code below is designed for easy comprehension and defines a relative class for organizing component-related 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>

Strategies for dynamically altering Vue component props using JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to extend a class in NestJS from another class?

Which method is more appropriate for my request - GET or POST? Or should I consider

Angular 1.5 - Component for fetching HTML content with dynamic data

Which specific element should the userEvent.type(...) function target in order to work effectively with MUI's DesktopDatePicker TextField component?

Converting a multipart form data string into JSON format

What is the best way to assign a unique number to every div id that is generated?

The functionality of opening a new tab when clicking on a link image is not functioning correctly on Mozilla, whereas it

Displaying both items upon clicking

Utilizing HTML and Javascript for streaming audio and recording voice

Tips for setting a threshold in a highcharts ng chart

Utilizing MongoDB and Express to access collections within a controller

An observer is handed to me when I receive an array as a parameter

issues arising from a growing css division

Encountered a JavaScript loading error during the installation of Sourcetree on a Windows 7

Enhance your website with a Bootstrap search bar that seamlessly integrates with your router by adding "?search=" to

Utilizing arrays dynamically to generate data for a bar chart display in JavaScript

What is the most effective way to utilize an existing table in MySQL with a TypeORM entity?

When a directive generates an element, the ng-click function may not function as expected

Automating the process of populating preferredCountries from intl-tel-input with database output

Is it possible to pass a component into a dialogue box in material-ui using React?