Trigger output refresh on option changes.

Author: BigBlueHat

playground/next/editor.mjs

@@ -431,7 +431,7 @@ window.app = createApp({
     this.setOutputTab(this.outputTab);
   },
   async setOutputTab(value) {
-    if (!value || !this.doc) return;
+    if (!this.doc) return;
     if (value) this.outputTab = value;
     let context = this.contextDoc;
     switch (this.outputTab) {

playground/next/index.html

@@ -146,21 +146,21 @@ <h2 class="ui massive header">JSON-LD Playground</h2>
             <div class="field">
               <div class="ui radio checkbox">
                 <input type="radio" id="options-api-processingMode-default" name="processingMode" value="" checked
-                  v-model="options.processingMode">
+                  v-model="options.processingMode" @change="setOutputTab()">
                 <label for="options-api-processingMode-default">Default</label>
               </div>
             </div>
             <div class="field">
               <div class="ui radio checkbox">
                 <input type="radio" id="options-api-processingMode-1-0" name="processingMode" value="json-ld-1.0"
-                  v-model="options.processingMode">
+                  v-model="options.processingMode" @change="setOutputTab()">
                 <label for="options-api-processingMode-1-0">JSON-LD 1.0</label>
               </div>
             </div>
             <div class="field">
               <div class="ui radio checkbox">
                 <input type="radio" id="options-api-processingMode-1-1" name="processingMode" value="json-ld-1.1"
-                  v-model="options.processingMode">
+                  v-model="options.processingMode" @change="setOutputTab()">
                 <label for="options-api-processingMode-1-1">JSON-LD 1.1</label>
               </div>
             </div>
@@ -170,7 +170,7 @@ <h2 class="ui massive header">JSON-LD Playground</h2>
             <label for="options-api-base" class="two wide field">Base</label>
             <div class="sixteen wide field">
               <input type="text" id="options-api-base-url" placeholder="URL"
-                v-model="options.base">
+                v-model="options.base" @change="setOutputTab()">
             </div>
           </div>
 
@@ -179,7 +179,7 @@ <h2 class="ui massive header">JSON-LD Playground</h2>
             <div class="field">
               <div class="ui checkbox">
                 <input type="checkbox" id="options-api-compactArrays"
-                  v-model="options.compactArrays">
+                  v-model="options.compactArrays" @change="setOutputTab()">
                 <label for="options-api-compactArrays">Compact Arrays</label>
               </div>
             </div>
@@ -190,7 +190,7 @@ <h2 class="ui massive header">JSON-LD Playground</h2>
             <div class="field">
               <div class="ui checkbox">
                 <input type="checkbox" id="options-api-compactToRelative"
-                  v-model="options.compactToRelative">
+                  v-model="options.compactToRelative" @change="setOutputTab()">
                 <label for="options-api-compactToRelative">Compact To Relative</label>
               </div>
             </div>
@@ -202,14 +202,14 @@ <h2 class="ui massive header">JSON-LD Playground</h2>
               <div class="field">
                 <div class="ui radio checkbox">
                   <input type="radio" id="options-api-rdfDirection-default" name="rdfDirection" value="" checked
-                    v-model="options.rdfDirection">
+                    v-model="options.rdfDirection" @change="setOutputTab()">
                   <label for="options-api-rdfDirection-default">Default (null)</label>
                 </div>
               </div>
               <div class="field">
                 <div class="ui radio checkbox">
                   <input type="radio" id="options-api-rdfDirection-i18n-datatype" name="rdfDirection" value="i18n-datatype"
-                    v-model="options.rdfDirection">
+                    v-model="options.rdfDirection" @change="setOutputTab()">
                   <label for="options-api-rdfDirection-i18n-datatype">"i18n-datatype"</label>
                 </div>
               </div>
@@ -222,14 +222,14 @@ <h2 class="ui massive header">JSON-LD Playground</h2>
               <div class="field">
                 <div class="ui radio checkbox">
                   <input type="radio" id="options-api-safe-false" name="safe" :value="false"
-                    v-model="options.safe">
+                    v-model="options.safe" @change="setOutputTab()">
                   <label for="options-api-safe-false">False</label>
                 </div>
               </div>
               <div class="field">
                 <div class="ui radio checkbox">
                   <input type="radio" id="options-api-safe-true" name="safe" :value="true"
-                    v-model="options.safe">
+                    v-model="options.safe" @change="setOutputTab()">
                   <label for="options-api-safe-true">True</label>
                 </div>
               </div>