The problem with rendering the text in Vue instance?

Question

I have a Vue instance called appDetails. This instance belongs to app.html. In it I declared function getApp, which returns the name of app:

var appDetails = new Vue({
  el: '#appDetails',
  methods: {
    getApp() {
      var path = url;
      var formData = "id=" + id;
        return axios.get(path, formData)
        .then((res) => {
           return res.data.name;
        })
    }})

Then in another js file I created product instance. This js file belongs to product.html. In it I declared computed property. In body of property I want to call a function of appDetails Vue instance. The returned data of the property is the name of app.

var product = new Vue({
  el: '#product',
  computed : {
    app_name: function() {
      appDetails.getApp()
        .then((returnVal) => {
          return returnVal;
        })
    }});

In product.html I wrote:

<a>{{app_name}}</a>

But when I load page, there is no text. tag is empty.

But when I tried to console log it showed me a name. Anybody knows how to solve this problem?

What happens if you console.log product? Do you get a vue instance? — user5283119
– user5283119, Commented Jun 10, 2019 at 14:40
You could use $parent to call methods on the parent component or $refs to access child components, but the bigger issue is your computed property. The function must not be asynchronous. — Connor
– Connor, Commented Jun 10, 2019 at 14:42
Two Vue instances placed in different html files, rendered at different routes within a normal website have nothing in common and they can't communicate with each other out of the box. In order to do it, you need to save data to be shared into either localstorage (browser storage) or on your server and when they activate (when you render the page containing one of them) they should get the data from where you've saved it and use it. — tao
– tao, Commented Jun 10, 2019 at 14:54

Connor · Accepted Answer · 2019-06-10 21:43:49Z

1

app_name resolves to undefined because the function does not return anything. Computed properties cannot be asynchronous, so instead you should create a data field on your component and call an asynchronous function that populates it. If you only need to fetch the data once, then mounted is probably a good place to do this.

var product = new Vue({
  el: '#product',
  data: function () {
    return {
      app_name: ''
    }
  },
  mounted: function () {
    appDetails.getApp()
      .then((returnVal) => {
        this.app_name = returnVal;
      })
  }
});

Also, does getApp() depend at all on the state of the AppDetails component? If not, it may make sense to keep it as a standalone function as it would be easier to use import it into both components.

answered Jun 10, 2019 at 21:43

Connor

64.8k28 gold badges148 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

The problem with rendering the text in Vue instance?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related