docs: fix price not updating

This commit is contained in:
Prohurtz 2024-04-01 13:48:34 -05:00
parent a3801e216c
commit 0b1fa0d14b
2 changed files with 6 additions and 6 deletions

View File

@ -15,14 +15,14 @@
<tr v-for="component in components" :key="component.name"> <tr v-for="component in components" :key="component.name">
<th>{{ component.name }}</th> <th>{{ component.name }}</th>
<td> <td>
<select v-if="component.choices.length > 1" v-model="component.selectedChoice" @change="switchSelect($event, component)"> <select v-if="component.choices.length > 1" v-model="component.selectedChoice" @change="updatePrices">
<option v-for="(choice, index) in component.choices" :key="index" :value="index">{{ choice.name }}</option> <option v-for="(choice, index) in component.choices" :key="index" :value="index">{{ choice.name }}</option>
</select> </select>
<span v-else>{{ component.choices[0].name }}</span> <span v-else>{{ component.choices[0].name }}</span>
</td> </td>
<td>{{ component.selectedChoice ? component.choices[component.selectedChoice].amount(tracker) : 0 }}</td> <td>{{ component.selectedChoice ? component.choices[component.selectedChoice].amount(tracker) : 0 }}</td>
<td>{{ component.selectedChoice ? '$' + component.choices[component.selectedChoice].cost : 0 }}</td> <td>{{ component.selectedChoice ? '$' + component.choices[component.selectedChoice].cost.toFixed(2) : 0 }}</td>
<td>{{ component.selectedChoice ? '~$' + (component.choices[component.selectedChoice].costAll(tracker) * 100) / 100 : 0 }}</td> <td>{{ component.selectedChoice ? '~$' + (component.choices[component.selectedChoice].costAll().toFixed(2)) : 0 }}</td>
<td v-html="component.selectedChoice ? component.choices[component.selectedChoice].links : ''"></td> <td v-html="component.selectedChoice ? component.choices[component.selectedChoice].links : ''"></td>
</tr> </tr>
</tbody> </tbody>
@ -211,12 +211,13 @@ export default {
if (component.choices.length > 1) { if (component.choices.length > 1) {
const choice = component.choices[component.selectedChoice]; const choice = component.choices[component.selectedChoice];
total += choice.costAll(this.tracker); total += choice.costAll(this.tracker);
} else if (component.choices.length === 1) {
total += component.choices[0].costAll(this.tracker);
} }
}); });
this.total = total; this.total = total;
}, },
switchSelect(event, component) { switchSelect(event, component) {
// Use Vue's $set method to ensure reactivity
this.$set(component, 'selectedChoice', event.target.value); this.$set(component, 'selectedChoice', event.target.value);
this.updatePrices(); this.updatePrices();
} }

View File

@ -22,7 +22,7 @@
</td> </td>
<td>{{ component.selectedChoice ? component.choices[component.selectedChoice].amount(tracker) : 0 }}</td> <td>{{ component.selectedChoice ? component.choices[component.selectedChoice].amount(tracker) : 0 }}</td>
<td>{{ component.selectedChoice ? '$' + component.choices[component.selectedChoice].cost.toFixed(2) : 0 }}</td> <td>{{ component.selectedChoice ? '$' + component.choices[component.selectedChoice].cost.toFixed(2) : 0 }}</td>
<td>{{ component.selectedChoice ? '~$' + (component.choices[component.selectedChoice].costAll(tracker).toFixed(2)) : 0 }}</td> <td>{{ component.selectedChoice ? '~$' + (component.choices[component.selectedChoice].costAll().toFixed(2)) : 0 }}</td>
<td v-html="component.selectedChoice ? component.choices[component.selectedChoice].links : ''"></td> <td v-html="component.selectedChoice ? component.choices[component.selectedChoice].links : ''"></td>
</tr> </tr>
</tbody> </tbody>
@ -316,7 +316,6 @@ export default {
mounted() { mounted() {
this.updatePrices(); this.updatePrices();
}, },
}; };
</script> </script>
<style scoped> <style scoped>