CODEWITHSUNDEEP
vue.jsvuejs2vue-component
Coder Guy
Coder Guy

Reputation: 325

How to change vue.js components data outside scope

I want to change vue.js data outside the default export statement. Given the example below, how would I go about doing that?

<template>
    <div>
        <h6 class="font-weight-normal mb-3">{{ name }}</h6>
    </div>
</template>

<script>
export default {
    data() {
        return {
            name: ""
        }
    }
}

let changeName = (name) => {
    //How do I change the name data property here
}
</script>

Upvotes: 4

Views: 2741

Answers (2)

Yom T.
Yom T.

Reputation: 9200

If you assign the component to a variable/constant, you should be able to simply trigger the proxy setter of the data object or with component-level methods. 

const component = new Vue({
  data() {
    return {
      name: "Initial value."
    }
  },
  
  methods: {
    changeName(newName) {
      this.name = newName;
    }
  }
});

// Mount it to an element (for demo purposes)
component.$mount('#app');

document.getElementById('btn-setter').onclick = function() {
  component.name = 'Changed with SETTER';
};

document.getElementById('btn-method').onclick = function() {
  component.changeName('Changed with METHOD');
};

// Uncomment this to start exporting it.
// export default component;
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <h6 class="font-weight-normal mb-3">{{ name }}</h6>
  
  <button id="btn-setter">Change with setter</button>
  <button id="btn-method">Change with method</button>
</div>

Upvotes: 2

Michael
Michael

Reputation: 5048

You can write any function you want in the page outside of the component (or export statement) but you would need to invoke it in your methods section or somewhere in the component. I use this for functions that create default values, instead of importing them from outside just write a function initVal = () => someVal then in the data or computed or somewhere reference initVal (no this).

Upvotes: 0

Related Questions