Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

trigger update on v-html from javascript #743

Closed
macfire opened this issue Mar 11, 2015 · 1 comment
Closed

trigger update on v-html from javascript #743

macfire opened this issue Mar 11, 2015 · 1 comment

Comments

@macfire
Copy link

macfire commented Mar 11, 2015

How can I trigger an update on v-html when the v-model (text area) is updated from a script?
In my case, the textarea (with v-model) is populated from an ajax callback successfully, but the v-html doesn't update until I type in the textarea.

After reading issue #372, I hoped triggering a change event on the textarea would refresh the v-html -- but no success.

<div id="editor">
  <textarea v-model="input"></textarea>
  <div v-html="input | marked"></div>
</div>
<script>
new Vue({
  el: '#editor',
  filters: {
    marked: marked
  }
})
</script>
@macfire
Copy link
Author

macfire commented Mar 11, 2015

After getting some lunch, I realized I was taking the wrong approach.

I changed my code to update the $data.input, which then updated both the v-model and v-html.
First, I assigned the Vue object to a variable in order to target.

<div id="editor">
  <textarea v-model="input"></textarea>
  <div v-html="input | marked"></div>
</div>
<script>
var $vm = new Vue({
  el: '#editor',
  filters: {
    marked: marked
  }
})

// pseudo-code:
function myAjaxCallback(myajaxdata) {
    $vm.$data.input = myajaxdata[0].myfield;
}
</script>

@macfire macfire closed this as completed Mar 11, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant