Verified Commit 052f80df authored by Connor Shea's avatar Connor Shea 🏄

Manage the state of the application somewhat better.

parent 94601344
Pipeline #26355764 passed with stage
in 1 minute and 34 seconds
<template>
<div>
<h1>MDN BCD File Creator</h1>
<CompatData></CompatData>
<CompatDataOutput></CompatDataOutput>
<CompatData
v-bind:categories="categories"
/>
</div>
</template>
<script>
import CompatData from './CompatData.vue'
import CompatDataOutput from './CompatDataOutput.vue'
export default {
components: {
CompatData,
CompatDataOutput
CompatData
},
data() {
return {
test: "test"
categories: [
{
value: "api",
name: "API"
},
{
value: "css",
name: "CSS"
},
{
value: "html",
name: "HTML"
},
{
value: "http",
name: "HTTP"
},
{
value: "javascript",
name: "JavaScript"
},
{
value: "mathml",
name: "MathML"
},
{
value: "svg",
name: "SVG"
},
{
value: "webdriver",
name: "WebDriver"
},
{
value: "webextensions",
name: "WebExtensions"
}
]
}
},
methods: {
setCategory(category) {
console.log("test2");
}
}
}
}
</script>
<template>
<div>
<select v-model="category">
<option v-for="category in categories" v-bind:key="category.value" v-bind:value="category.value">
{{ category.name }}
</option>
</select>
<div>
<p>Feature Category</p>
<select v-model="category">
<option v-for="category in categories" v-bind:key="category.value" v-bind:value="category.value">
{{ category.name }}
</option>
</select>
</div>
<span>{{ category }}</span>
<FeatureList
v-bind:category.sync="category"
v-bind:features.sync="features"
/>
<FeatureList></FeatureList>
<CompatDataOutput
v-bind:output="outputData"
/>
</div>
</template>
<script>
import FeatureList from './FeatureList.vue'
import FeatureList from './FeatureList.vue';
import CompatDataOutput from './CompatDataOutput.vue';
export default {
components: {
FeatureList
FeatureList,
CompatDataOutput
},
props: {
categories: {
type: Array,
required: true
}
},
data() {
return {
category: "api",
categories: [
{
value: "api",
name: "API"
},
{
value: "css",
name: "CSS"
},
{
value: "html",
name: "HTML"
},
{
value: "mathml",
name: "MathML"
},
{
value: "webextensions",
name: "WebExtensions"
}
]
features: []
}
}
},
computed: {
outputData: function() {
let output = {};
output[this.category] = { };
for (let i = 0; i < this.features.length; i++) {
output[this.category][this.features[i].text] = { };
}
console.log(output);
console.log(JSON.stringify(output));
console.log(JSON.stringify(this.features));
return JSON.stringify(output, null, 2);
}
}
}
</script>
<template>
<pre>
{{ test }}
</pre>
<pre class="output-json">{{ output }}</pre>
</template>
<script>
export default {
data() {
return {
test: "test"
props: {
output: {
type: String,
required: true
}
},
methods: {
setCategory(category) {
console.log("test2");
}
}
}
}
</script>
......@@ -30,33 +30,41 @@ export default {
components: {
FeatureInput,
FeatureListItem
},
data () {
},
props: {
features: {
type: Array,
required: true
},
category: {
type: String,
required: true
}
},
data() {
return {
newFeatureText: '',
features: [
{
id: nextFeatureId++,
text: 'Feature Name'
}
]
newFeatureText: ''
}
},
methods: {
addFeature () {
const trimmedText = this.newFeatureText.trim()
if (trimmedText) {
addFeature() {
console.log(`Adding a feature: ${this.newFeatureText}`);
const trimmedText = this.newFeatureText.trim();
if (trimmedText) {
this.features.push({
id: nextFeatureId++,
text: trimmedText
})
this.newFeatureText = ''
}
this.newFeatureText = '';
}
},
removeFeature (idToRemove) {
removeFeature(idToRemove) {
console.log(`Removing a feature: ${idToRemove}`);
this.features = this.features.filter(feature => {
return feature.id !== idToRemove
})
return feature.id !== idToRemove;
})
this.$emit('update:features', this.features);
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment