how to return computed html in vue2? - dom

Question

I try to return the part of html depending on variable type I want to do like：
<template>
<div>{{getvalue(this.$store.state.output)}}</div>
</template>
<script>
export default {
methods:{
getvalue(output){
if(output.constructor == Array){
re="";
for(i in output){
re+=<p>{{i}}</p>;
}
return re;
}
else if(output.constructor == Object){
re="";
for(i in output){
re+=<p><span>i</span><span>{{output[i]}}</span></p>
}
return re;
}else if(output.constructor == String){
return <p>{{output}}</p>
}
}
},
...
}
</script>
I know in react I can use virtualDOM to do that， how should I do the similar things like above in Vue2.5.11?

Answer 1

#ceejayoz is right. It would be missing the whole point of Vue.
Another mistake is that computed values don't accept parameters. It is supposed to be treated as a value and not a function.
This is a more proper way of doing things in Vue. By using v-if and v-for.
<template>
<div>
<div v-if="getOutputConstructor==Array">
<p v-for="i in this.$store.state.output" :key="i">{{i}}</p>
</div>
<div v-else-if="getOutputConstructor==Object">
...
</div>
<div v-else-if="getOutputConstructor==String">
...
</div>
</div>
</template>
<script>
export default {
computed: {
getOutputConstructor() {
const output = this.$store.state.output;
return output.constructor;
}
}
};
</script>
But.. if you really really want to do it the wrong way, use v-html