SurveyVue.Model doesn't update "completedHTML"

[dnlsgv]

Hi, I have an issue when I try to change the model of a survey using a click event (on a button). The component's data:

  data() {
    var json1 = {
   "completedHtml": "completedHTML json1",
   "pages": [
    {
     "name": "page1",
     "elements": [
      {
       "type": "text",
       "name": "question1 json1"
      }
     ]
    }
   ]
  };
      var json2 = {
   "completedHtml": "completedHTML json2",
   "pages": [
    {
     "name": "page1",
     "elements": [
      {
       "type": "text",
       "name": "question1 json2"
      }
     ]
    }
   ]
  };   
    var model = new SurveyVue.Model(json1);
    return {
      survey: model,
      json1,
      json2
    };
  }

And I also have a button that change the survey model

<button v-on:click="changeSurveyJson22">Change survey json22</button>

  methods: {
    changeSurveyJson22() {
      this.survey = new SurveyVue.Model(this.json2);
    }

The bug occurs when I complete the survey and then click to "Change survey json22" button, the question changes but the completedHTML continues with the previous value "completedHTML json1" that should be "completedHTML json2".

Is it ok to use this.survey = new SurveyVue.Model(this.json2) to change the model of a survey?

Full source code:

Summary

<template>
  <div class="container">
    <!-- If you want to hide survey, comment the lines below -->
    <div>
      <button @click="changeSurveyJson11">Change survey json11</button>
      <button @click="changeSurveyJson22">Change survey json22</button>
    </div>
    <h2>SurveyJS Library - a sample survey below</h2>
    <survey :survey="survey"></survey>
  </div>
</template>

<script>
import * as SurveyVue from "survey-vue";
import "bootstrap/dist/css/bootstrap.css";
var Survey = SurveyVue.Survey;
Survey.cssType = "bootstrap";

import * as widgets from "surveyjs-widgets";
import "inputmask/dist/inputmask/phone-codes/phone.js";

import { init as customWidget } from "../components/customwidget";

widgets.icheck(SurveyVue);
widgets.select2(SurveyVue);
widgets.inputmask(SurveyVue);
widgets.jquerybarrating(SurveyVue);
widgets.jqueryuidatepicker(SurveyVue);
widgets.nouislider(SurveyVue);
widgets.select2tagbox(SurveyVue);
widgets.sortablejs(SurveyVue);
widgets.ckeditor(SurveyVue);
widgets.autocomplete(SurveyVue);
widgets.bootstrapslider(SurveyVue);
customWidget(SurveyVue);

SurveyVue.Serializer.addProperty("question", "tag:number");

export default {
  components: {
    Survey
  },
  data() {
    var json1 = {
   "completedHtml": "completedHTML json1",
   "pages": [
    {
     "name": "page1",
     "elements": [
      {
       "type": "text",
       "name": "question1 json1"
      }
     ]
    }
   ]
  };
      var json2 = {
   "completedHtml": "completedHTML json2",
   "pages": [
    {
     "name": "page1",
     "elements": [
      {
       "type": "text",
       "name": "question1 json2"
      }
     ]
    }
   ]
  };   
    var model = new SurveyVue.Model(json1);
    return {
      survey: model,
      json1,
      json2
    };
  },
  methods: {
    changeSurveyJson11() {
      this.survey = new SurveyVue.Model(this.json1);
    },
    changeSurveyJson22() {
      this.survey = new SurveyVue.Model(this.json2);
    }
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>

[tsv2013]

You needn't to re-create new model to change it properties. You can do it via API:

    var survey = new Survey.Model(json);
    survey.completedHtml = "Changed completedHtml";

Here is the working sample - https://plnkr.co/edit/clzdtZYmrP8QETC7

Another point is that you want to change complete message after survey has been completed. At this moment the completedHtml property can be changed before survey completed.

[dnlsgv]

Another point is that you want to change complete message after survey has been completed. At this moment the completedHtml property can be changed before survey completed.

Thanks for the answer! So, Isn't there a way to re-create a survey model (with a new completedHtml) after answering the survey?

[tsv2013]

If you want to show the same survey, you can use the

survey.clear(true, true);

code.

If you want to create completely new survey, then yes

survey = new Survey.Model(newJson);

[dnlsgv]

But using this:

survey = new Survey.Model(newJson);

This doesn't create a completely new json model, because the completedHtml doesn't update. Here is a example https://plnkr.co/edit/hno6NtmHouGKq5ln steps:

1. Answer the current survey.
2. The completedHtml when the survey is answered is: "Thanks" (this is ok)
3. Click "completely new json" button
4. Complete the survey
5. The final message is "Thanks" (the previous completedHtml value), why? that should be "completedHtml": "final message"

[tsv2013]

Completed survey has finished it's lifecycle. You can either re-run it using the clear method either create a new model as you do and render a new survey again from the 1st page, but not from the complete page.

[tsv2013]

Any changes in a complete page should be done before survey completed.

Can you share your business case - what do you want to achieve?

[dnlsgv]

I want to achieve that a vue component re-create a survey if creator/builder json changes (a very similar behaviour to what happens with the "Test survey" tab). My main problem is that I can manage to re-create the entire survey (using this.survey = new Survey.Model(newJson);), but for some reason when I submit the survey the final message doesn't change (it remains with the previous value).

In short, I want to do a "Test survey" (re-create current survey) tab but in a vue component.