State not changing when using a composables
Hello, my component was not updating when I changed player id using a composables when I placed this directly in component it was working but as composables it wasn't:
import { ref, computed } from 'vue';
import { throws } from '~/data/baseball';
export function usePlayerData(players, playerId) {
const selectedPlayer = computed(() => {
if (playerId === null) {
return null;
}
return players.find((player) => player.id == playerId);
});
const selectedThrows = computed(() => {
if (selectedPlayer.value === null) {
return null;
}
return throws.filter((shot) => shot.player_id === selectedPlayer.value.id);
});
return { selectedPlayer, selectedThrows };
}
So this is now my composables and in my component:
const props = defineProps({
playerId: {
required: true,
},
});
const { value: players } = useState('players');
const { selectedPlayer, selectedThrows } = usePlayerData(
players,
props.playerId
);
This was not working anyone knows why?
This works tho:
Composables:
import { ref, computed } from 'vue';
import { throws } from '~/data/baseball';
export function usePlayerData(players, playerId) {
const selectedPlayer = computed(() => {
if (playerId.value === null) {
return null;
}
return players.find((player) => player.id == playerId.value);
});
const selectedThrows = computed(() => {
if (selectedPlayer.value === null) {
return null;
}
return throws.filter((shot) => shot.player_id === selectedPlayer.value.id);
});
return { selectedPlayer, selectedThrows };
}
Component:
const props = defineProps({
playerId: {
required: true,
},
});
const reactivePlayerId = ref(props.playerId);
watch(
() => props.playerId,
(newPlayerId) => {
reactivePlayerId.value = newPlayerId;
}
);
const { selectedPlayer, selectedThrows } = usePlayerData(
players,
reactivePlayerId
);
I used a watch for my ref
import { ref, computed } from 'vue';
import { throws } from '~/data/baseball';
export function usePlayerData(players, playerId) {
const selectedPlayer = computed(() => {
if (playerId === null) {
return null;
}
return players.find((player) => player.id == playerId);
});
const selectedThrows = computed(() => {
if (selectedPlayer.value === null) {
return null;
}
return throws.filter((shot) => shot.player_id === selectedPlayer.value.id);
});
return { selectedPlayer, selectedThrows };
}
So this is now my composables and in my component:
const props = defineProps({
playerId: {
required: true,
},
});
const { value: players } = useState('players');
const { selectedPlayer, selectedThrows } = usePlayerData(
players,
props.playerId
);
This was not working anyone knows why?
This works tho:
Composables:
import { ref, computed } from 'vue';
import { throws } from '~/data/baseball';
export function usePlayerData(players, playerId) {
const selectedPlayer = computed(() => {
if (playerId.value === null) {
return null;
}
return players.find((player) => player.id == playerId.value);
});
const selectedThrows = computed(() => {
if (selectedPlayer.value === null) {
return null;
}
return throws.filter((shot) => shot.player_id === selectedPlayer.value.id);
});
return { selectedPlayer, selectedThrows };
}
Component:
const props = defineProps({
playerId: {
required: true,
},
});
const reactivePlayerId = ref(props.playerId);
watch(
() => props.playerId,
(newPlayerId) => {
reactivePlayerId.value = newPlayerId;
}
);
const { selectedPlayer, selectedThrows } = usePlayerData(
players,
reactivePlayerId
);
I used a watch for my ref
